Pure CSS Responsive Grid Overlay
I created it because I couldn’t find it. We’ve only just introduced it here at momondo but my hopes are that it will make it easier for:
- frontenders to layout elements
- designers to see if the layout looks as intended at different viewports
- all of us to get a more consistent design with e.g. less custom widths
Techniques Used
I didn’t have to worry about our browser stack — its a devtool. This meant I could rely on fun stuff like var().
CSS variables are really useful because we can overwrite them in media queries which gives us preprocessor like powers to define the structure once and then adjust parameters like gutter sizes, column counts, overlay colors, media query names etc. at different breakpoints.
I draw the lines using gradients where two stops (a coloured and a transparent) are at the same point — read Do you really know CSS linear-gradients? if you’re unfamiliar with the technique.
I apply the styling to html::before and html::after and inspired by this technique to import css breakpoints into javascript I do the same just to display them as part of the overlay.
Use it
I’ll encourage you to read the articles above if you aren’t familiar with the concepts and then jump to the pen, fork it, read the code comments and play around with the settings.
Feel free to ask me using issues on GitHub if you have problems/suggestions or I’m larsenwork on Twitter.
🐞
It has one flaw and I’m very interrested in suggestions if you have any ideas on how to fix.
It’s caused by the width of the background images being rounded to integer pixel values by the browser so if calc((100% + gutter)/columns) is e.g. 22.333px the browser rounds it to 22px and 22*6=132 vs 22.333*6=134.
