8 Jun 2017
Magic Cross Browser CSS Grid
Since the arrival of CSS Grid to modern browsers, rumor has it creating responsive layouts has never been easier. On top of that, fallbacks for older browsers are also said to be a breeze. Too good to be true? I decided to have a look for myself.
Check out the result at Codepen.
To put the technique to the test, I decided to build a very typical gallery containing rows of equally tall cards. There would be max three cards side-by-side, and I wanted the number of cards on each row to automatically adjust to the width of the screen.
The cards would contain an image, some text paragraphs and a button or link. The button or link should be placed centered horizontally at the bottom on each card (obviously without covering any other content within the card).
The gallery should be usable and work as intended even in browsers that don’t support flexbox. Browsers that support flexbox but not CSS Grid, should get an enhanced flexbox version of the gallery. Browsers supporting CSS Grid should get a CSS Grid version of the gallery.
The content of the cards should be allowed to be dynamic within reason, so that the person adding content to them wouldn’t have to think too much about paragraph length.
Float based layout
Good old percentage float layout in combination with media queries is for those browsers who don’t support neither flexbox nor CSS Grid.
More on Trailing “…”
overflow:ellipis;doesn’t help in this instance unless you are OK with the text paragraph just being one line. Using
@supports rule in CSS.
Note on images
In the example I’ve been using
srcset for brevity and simplicity. However, to achieve best browser support it should be replaced with a picturefill solution. (See current alignment of
srcset at caniuse.)
@supports to serve flexbox layout to browsers that could handle it.
An interesting twist on using
@supports to check for flexbox compatibility is that Internet Explorer 11 and 10 can handle flexbox to some degree, but does not support @supports at all. Make sure they get the flexbox layout styles without the
To make that happen, you might again need to use other techniques than CSS to sniff out these browsers and hand them the appropriate styles.
CSS Grid Layout
Writing the code for the gallery layout using CSS Grid was indeed painless and brief. Gaze in awe at the 3 lines of code needed to set up the responsive gallery:
display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr)); grid-gap: 1em;
- Tell the container to use grid
- Specify that I want columns of at least 17.5em width to be repeated within my container. The columns should be elastic so that they always fill the width of the container. Any extra space that needs to be added to them in order for them to fill out the container, will be distributed within the columns evenly (the
- Add some spacing between the columns and rows.
Since all browsers that supports
@supports also supports CSS Grid, there is no more to preparing fallbacks than wrapping the grid code in a
@supports rule and be happy.
Yes! CSS Grid do live up to the hype. In spite of coming with 17 new properties, it is not as intimidating as one might imagine. (A lot of them are about creating different short forms to give programmers more freedom, as well as a few properties very similar to flexbox syntax.)
Personally I was not looking forward to having to add yet another layout to create fallbacks for, but since CSS Grid seems to be painless to write and can safely be added within
@supports with just a few adjustments (specifically for element widths), I’m a total fan 😄.
This article was first publishied on Frida Nyvall’s account on Medium.