CSS Grid + Flexbox Solving Real-world Problems

> Complete CodePen Demos: https://codepen.io/collection/XQdebB/

Recently I had been given a responsive design that looked complex in the way items changed order and layouts changed at different viewports. This new design looked complex, until we thought of it in terms of CSS Grid and FlexBox.

The challenge for this would be supporting Internet Explorer 11 and Safari 9+.

After highlighting the design complexities, we will show the CSS needed to support modern browsers, then we’ll add IE support and finally get it to work in Safari 9 + 10.0.

The design

Responsive Wireframes for desktop, mobile variation A and mobile variation B

Looks pretty straight forward, with a couple points to note:

• The product Variation changes order
• CTA’s must be inline with each other
• CTA’s must start below the bottom of the price
• CTA’s must not interfere with any ‘offer text’ overflow
• CTA’s must be below the image (variation a)

Building The CSS Grid

We split up the card into different areas.

responsive wireframes with grid overlayed

There were a couple known things we couldn’t use from the spec, namely: grid-column-gap and named grid columns as these were not in the original draft of the spec and Internet Explorer does not support them.

Mobile Grid Layout

This is a pretty straight-forward grid layout. The only thing to note is area-d is also using flex and space-between to keep the buttons at the edges.

CSS Grid layout for mobile product-card

Mobile Grid Layout — Variant B

Small and simple changes to adapt the grid. Also area-d flex direction has changed so that the buttons are now vertically aligned.

CSS Grid layout for mobile product-card variant b

Desktop Grid Layout

CSS Grid layout for desktop product-card

How’s it look so far?

Taking a look at our code so far, our CSS Grid Codepen demo works great in Safari 10.1+, Firefox, Chrome and Opera, but not at all within Internet Explorer or Safari 9 or 10.0.

Internet Explorer

If you are using autoprefixer you will have to explicitly turn grid support on. This will add the -ms- prefixes:

• display: grid; becomes display: -ms-grid;
• grid-template-rows: repeat(3, min-content); becomes -ms-grid-rows: (min-content)[3];
• grid-template-columns: 33% 1fr 55px; becomes -ms-grid-columns: 33% 1fr 55px;
• grid-row: 1 / span 2; becomes -ms-grid-row-span: 2;
-ms-grid-column: 1;
• grid-column: 1; becomes -ms-grid-column: 1;

Last step, due to the media queries, is to ensure we specify / span 1. This is because of the expanded syntax, if we forget to specify the span count, any previous -ms-grid-row-span: would still be specified giving unwanted results.

CSS Grid with additions for Internet Explorer

CodePen Demo for Internet Explorer

Tackling Safari 9 + 10.0

Safari < 10.1 doesn’t support CSS Grid. At all. This is a shame, and unfortunately layout, isn’t ‘progressive enhancement’ — it’s pretty essential. But, I would say, maybe we don’t aim for ‘perfection’; instead let’s see how close we can get.

Safari 9 does understand @supports, unfortunately, Internet explorer doesn’t. This means we had to come up with an alternate. As we’re using PostCSS I came up with a mixin. This will unfortunately bloat the CSS some-what.

Using the same Grid Layout concept, we have to add floats, widths + margins in order to closely (but not exactly) replicate the more modern browsers. The one sacrifice I’ve decided to make is to not replicate mobile layout b on Safari.

Due to supporting browsers that don’t understand CSS Grid, we’ve now had to add more extra code than I would like, but, I feel it’s been worth it to get a better layout for most users.

The Cost of Browser Support

We’ve gone from 1.39KB to 2.76kb. If we treat Internet Explorer like Safari and drop the -ms- prefixes, we are back down to 1.96kb.

These numbers are all small so it’s depends the situation and whether or not you want the maintenance overhead as to which option you take.

TL;DR

• Safari < 10.1 forced us to add extra layout CSS (float, margins etc) as CSS Grid is not supported
• The extra CSS added for Safari < 10.1 needs to be ‘undone’ in browsers that support @supports
• Internet Explorer -ms- prefixes forces explicit use of / span 1 (even though it looks superfluous)
• Up to you if you decide to give IE the same support as Safari < 10.1 to reduce bloat and possible maintenance

The CSS Grid helps solve complex layout problems and changes how you may view these problems from the beginning — creating simpler code!

All CodePen Demos: https://codepen.io/collection/XQdebB/