• Edit
  • Download
  • <!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" gridlines="vertical" 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></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" gridlines="vertical" 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;
    }