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
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
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.