gridlines demo

<!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>
    body {
      background: #e6e6e6;
    }

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

<body>
  <zing-grid caption="Astrology Signs" 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>
  <zing-grid caption="Astrology Signs" 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>

body {
  background: #e6e6e6;
}