Nyhetsbrev

Get articles, advice and tips about:

You can read more about our privacy policy and how we use your personal data here

Magic Cross Browser CSS Grid

Magic Cross Browser CSS Grid

by Frida Nyvall

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.

Test Outlines

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.

I also set out to try and do as much as possible in terms of browser fallbacks with just CSS. For certain cases though some JavaScript is inevitably needed, and I’ll do my best to point out when in the walkthrough below.

Ancient Browsers

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.

To prevent cards from having different height and thus destroying the grid symmetry, I set a fixed height on the cards. Since the height of the cards is now fixed, I also needed to prevent the text from overflowing their container. As the text paragraph gets chopped off, I thought of ways of adding a visual cue to help bring attention to this fact. However as far as I know, to get trailing “…” (on a multiple line paragraph), or to get equally tall cards with no chopping off the paragraphs you will need to add some JavaScript.

More on Trailing “…”

Using overflow:ellipis;doesn’t help in this instance unless you are OK with the text paragraph just being one line. Using content:'...'; on p:after pseudo element only looks good as long as the text paragraph is already short. For long paragraphs (and all other paragraphs too), the “…” will end up at the very end of the text. Instead, use JavaScript to add those dots at the right place.

modernizr

If you have to support older Internet Explorer, like 9 and below, you probably already use JavaScript like modernizr to handle for example mediaqueries, HTML5 tags and check for support for SVG. Modernizr can be used to find out if the browser supports flexbox or not, but in this case the check for flexbox support has been delegated to the @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.)

Old Browsers

Flexbox layout

I used @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 @supports block.

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.

Modern Browsers

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;
  1. Tell the container to use grid
  2. 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 1fr part).
  3. 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.

Conclusion

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

Check out the project here

This article was first publishied on Frida Nyvall’s account on Medium.

Tags

More posts

img

Make you website GDPR compliant

img

Flexbox vs. CSS Grid – When to Use What

img

Responsive Typography with CSS Custom Properties (CSS Variables)