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;
}
