Mastering CSS Grid For Content Columns

CSS content columns done right without duplicating the code to break them up on mobile correctly.

Flexbox is great and it’s easy to build such content columns with CSS flex in 5 minutes as easy as 1–2–3. But how we can collapse the content on mobile as designer asks without duplicating the code? This was the good problem to think of.

CSS Grid came to solve the problem. It was a little bit tricky since… Yeah, we support all major browsers including not major IE11 & Edge. But there was a requirement: Chrome, Firefox, Safari, Edge, IE11. The trickiest part is IE11 since it’s using outdated specification of CSS Grids, as well as Edge up to version 16. Polyfill — it’s good, but playing around with JS for couple of the pages — it doesn’t worth it.

If you use grid-template-areas — it won’t work in IE11. But if you manually setup the grid — then it will work the way it should.

Here is basic structure. We’ll code the blocks with mobile first approach.

Basic code structure

Sweet! This is the only HTML we would use. Nothing else. No breakpoints for hiding/showing elements. CSS Grids will do the rest of the job. CSS Grid would change position of the blocks according to our breakpoint. I’ve separated CSS Grids code so you can easily reuse them without basic styling i’ve applied.

CSS Grid Complete Example

That’s it! Stay cool. Cheers!



Frontend Engineer at @ArtStationHQ

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store