CSS Baseline Grid Overlay

This is a baseline grid overlay created using some CSS gradients. it simulates a baseline grid based on ems which will allow you to size it according to your site's base font size.

The sample above shows the baseline grid with all its features turned on. View the Github Gist for full details on how to use it and features such as show on mouse-over, sub-guides, and elements highlights.


  • Special thanks to Mike Hulse who provided a lot of feedback and contributed to the development of the current version.
  • This project was inspired by DigitPaint [ http://advent2012.digitpaint.nl/13/ ]

Source Links

JSBin Demo