CSS Grid Layout — Multiply & Conquer

Have you ever noticed that division and multiplication is the same thing? Anyway. We’re going to design a responsive layout using CSS Grid in this tutorial. And here is a bird’s eye view of what to expect from the process:

To get a good idea of how flex works try flex layout editor on this page.

Image for post
Image for post
The whole enchilada. I like posting bird’s eye view image content upfront to save time scrolling.

With resolution-independent handheld devices things just got complicated. They are causing even classic responsive design rules to change. IM🙃.

So I set out on a quest to standardize responsive design by dashing through all CSS grid possibilities like it was an IQ test… or something…

What I discovered follows.

Basic Ideas Behind Column Division

I tried to figure out what we actually gain from each column division.

One-column designs help us put all of our content into long vertical list.

Two-column designs are okay for mini (tablet?) image galleries/portfolios.

Tree-column designs are the first of its kind to offer borders (margins.)

Four-column designs work well as full-screen image galleries.

I noticed odd-number column layouts ( 1) work for border-based layouts.

Image for post
Image for post

Hmm. what about the 5-column design? Remember odd-numbered columns are often used to create borders. Because they always end up in 2 extra sides.

Five-column designs can make a pretty decent @Medium-like article format.

And throughout the rest of this tutorial we will explore making one!

Use fr units to make them expand like you would margin: auto on regular elements. It doesn’t matter if it’s 1fr or 2fr or n-fr for borders as long as the primary content is specified using pixels:

Image for post
Image for post

The only difference here is that Medium uses 1000px for wide content and 700px for main article column. But the idea is the same.

Responsive Grid + Going Mobile

So far we created the primary scaffold. But what about responsive design?

CSS Grid makes things easier than you think!

Image for post
Image for post


responsive content != responsive borders.

The two techniques should be dealt with separately. But…

Often — as in this case — it is possible to solve the responsive content problem by solving responsive border problem.

If you can use your creativity to solve multiple problems by using one technique… all the better.

Having said this, in this case, we can solve this problem simply by switching outer lanes of your template to 0.5fr. (purple and blue ones.)

And…also switching either span or the template areas to expand into multiple columns making wide content space. (The pink area above.)

You can do this via media queries or JavaScript.

Finally… change the main lane (green) to 10fr. (You can use a similar value but ≥10 usually will work fine.) This will automatically scale your main (green) lane to the current screen resolution. Since both borders are now 0.5fr everything including borders and content will scale properly.

If you need to remove 0.5fr borders you can set them both to 0fr.

Image for post
Image for post

Going Mobile

Once all of the steps above are followed… When squeezed to a smaller space you should arrive at something like this.

Lesson learned here?

Always try to find the most graceful solution. Meaning, it’s clean, uncomplicated, and if possible solves multiple problems by applying a single change (or two.) This is not as hard as it may sound.

  • Is this the only solution? No.
  • Is this a perfect solution? No.
  • But it solves the problem, and it works — sufficiently enough.

And that’s a good thing to aim for. The approach shown in this tutorial is:

1. More rewarding & fun than hacking.
2. It’s respectable.
3. It invites you to actually understand how and why something works.
4. It’s simple. Hence, creates easy-to-maintain code.
5. It produces clean code.
6. Keeps your conscience clean too.

Speaking of which… otherwise… you might start “hacking” code. (Trying to solve problems by trial and error, often without understanding how it actually works.) You will still get things done this way. And probably even feel accomplishment of some sorts. But… it won’t be any fun.

Dynamic Article Editor Like Medium?

Of course in a dynamically-generated article editor you will have to code the wide-content columns to work algorithmically. You never know what combination of text and wide-content the author will want to use.

They can be arranged in any way. But I think using JavaScript and a few hours of your time it’s possible to make a dynamically-generated article editor (just like Medium’s) by swapping grid-template-areas as described above.

You can still use this layout (of course) for simple static articles if you’re designing them yourself by hand and know beforehand which type of content goes after which.

Non CSS grid-alternative for designing Medium-like articles?

The alternative without CSS grid? Well… not much difference. Maybe more complex. It’s still algorithmic but you end up using regular DIV elements.

Good luck with that 😊.

I do think CSS grid simplifies the process without sacrificing clean code.

I looked at <source code> for my medium tutorial page. It’s a mess.

Final Words

Primarily as a JavaScript programmer, I’ve never been good at website or application layouts. Especially after responsive era came along. But CSS grid is inspiring me to reconsider this elusive task.

I just needed to be shown step by step instructions and examples of a real-world layout made with CSS grid so I could start making my own.

But… I couldn’t find a single online tutorial that demonstrated that.

So I decided to write my own and share it with you!

It’s all about trying to understand things based on their intended purpose.

If you spend time to get to know CSS grid well, it’s like cheating.

It’s almost making me feel like I am better at layout design than I actually am.

I have to say I’m addicted to CSS grid at this point and I will use it from now on for creating all of my future layouts.

I hope these simple ideas helped you become more familiar with CSS Grid.

Get More Freemium via Social Networks

You can, on Twitter for weekend PDF giveaways.

Follow me on Instagram for a quick hit of JavaScript.

You can follow me on Facebook for free coding stuff.

Limited Time Offer

The diagrams in this tutorial were influenced directly by the manuscript!

Image for post
Image for post
CSS Visual Dictionary 28% OFF for Medium readers.

28% OFF

Medium Readers Only:

CSS Visual Dictionary

== grab a copy ==

Contains all CSS properties.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

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