experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-gridlines
mode: provenance
representation: html
origin_response_id: 596e6d0a458b78f624f1f8099d2a3614
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.569Z
version_nonce: 901c4c384302c32bacfd878a78d723d6
generated_at_utc: 2026-11-05T10:37:11.921Z
response_nonce: 6f33a474cd1b20be22b79b6b3ccafaa2

Vertical and Horizontal Gridlines

32 of 125
Easily add vertical and horizontal lines to your grid through the gridlines attribute.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 709px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Astrology Signs" gridlines="both" viewport-stop data='{
        "entry1": {
          "sign": "Aquarius",
          "date": "January 20 - February 18",
          "element": "Air"
        }, 
        "entry2": {
          "sign": "Pisces",
          "date": "February 19 - March 20",
          "element": "Water"
        }, 
        "entry3": {
          "sign": "Aries",
          "date": "March 19 - May 20",
          "element": "Fire"
        }, 
        "entry4": {
          "sign": "Taurus",
          "date": "April 20 - May 18",
          "element": "Earth"
        }, 
        "entry5": {
          "sign": "Gemini",
          "date": "May 21 - June 20",
          "element": "Air"
        }, 
        "entry6": {
          "sign": "Cancer",
          "date": "June 21 - Jully 22",
          "element": "Water"
        }, 
        "entry7": {
          "sign": "Leo",
          "date": "July 23 - Auguest 22",
          "element": "Fire"
        }, 
        "entry8": {
          "sign": "Virgo",
          "date": "Auguest 23 - September 22",
          "element": "Earch"
        }, 
        "entry9": {
          "sign": "Libra",
          "date": "September 23 - October 22",
          "element": "Air"
        }, 
        "entry10": {
          "sign": "Scorpio",
          "date": "October 23 - November 21",
          "element": "Water"
        }, 
        "entry11": {
          "sign": "Sagittarius",
          "date": "November 22 - December 21",
          "element": "Fire"
        }, 
        "entry12": {
          "sign": "Capricorm",
          "date": "January 22 - January 19",
          "element": "Earth"
        }
      }' </zing-grid>
    <script>
      ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid 
    	caption="Astrology Signs" 
      gridlines="both"  
      viewport-stop
      data='{
        "entry1": {
          "sign": "Aquarius",
          "date": "January 20 - February 18",
          "element": "Air"
        }, 
        "entry2": {
          "sign": "Pisces",
          "date": "February 19 - March 20",
          "element": "Water"
        }, 
        "entry3": {
          "sign": "Aries",
          "date": "March 19 - May 20",
          "element": "Fire"
        }, 
        "entry4": {
          "sign": "Taurus",
          "date": "April 20 - May 18",
          "element": "Earth"
        }, 
        "entry5": {
          "sign": "Gemini",
          "date": "May 21 - June 20",
          "element": "Air"
        }, 
        "entry6": {
          "sign": "Cancer",
          "date": "June 21 - Jully 22",
          "element": "Water"
        }, 
        "entry7": {
          "sign": "Leo",
          "date": "July 23 - Auguest 22",
          "element": "Fire"
        }, 
        "entry8": {
          "sign": "Virgo",
          "date": "Auguest 23 - September 22",
          "element": "Earch"
        }, 
        "entry9": {
          "sign": "Libra",
          "date": "September 23 - October 22",
          "element": "Air"
        }, 
        "entry10": {
          "sign": "Scorpio",
          "date": "October 23 - November 21",
          "element": "Water"
        }, 
        "entry11": {
          "sign": "Sagittarius",
          "date": "November 22 - December 21",
          "element": "Fire"
        }, 
        "entry12": {
          "sign": "Capricorm",
          "date": "January 22 - January 19",
          "element": "Earth"
        }
      }'
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}
// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery