Mastering CSS Grid For Content Columns
CSS content columns done right without duplicating the code to break them up on mobile correctly.
Last time i’ve been working on the columns for the new about pages for ArtStation we’re planning to release in the upcoming weeks and i’ve been thinking on the easiest way to markup content columns that our designer Nico designed. The major thing i’ve stuck with was the columns breakdown on mobile devices.
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.
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.
That’s it! Stay cool. Cheers!
