Adding a grid to a webpage for development

HTML
<body> <p>This <a href="https://www.sitepoint.com/web-layout-101-vertical-rhythm-is-a-drummer/" target="_blank" title="Web Layout 101: Vertical Rhythm is a Drummer">article</a> also explains how to add the grid using a Chrome browser extension. However I prefer to use the grid as it is in my css during development.</p> <p>Notice that the expected behavior is for the text to be centered within the grid lines, not to sit on the lower edge.</p> </body>
CSS
body:after{ /*The first rgba color sets the line color*/ background: linear-gradient(0, rgba(200,225,255,0.6) 1px, rgba(0, 0, 0, 0) 1px); /*The second px value sets the height between lines*/ background-size: 1px 1.5em; bottom: 0; margin-top: 0px; content: ''; display: block; height: auto; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; width: auto; z-index: 9999; } /*Just some additional styling to position the p text. The line-height and top- and bottom margins are the same as the distance between the grid lines.*/ p{ font-size:16px; font-size:1rem; width:50%; margin:1.5em auto; line-height:1.5; }
JAVASCRIPT
Expand for more options Login