Vertical and Horizontal Gridlines
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></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;}
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!