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.
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... And this is my very first tutorial in the series on making real layouts with CSS grid.
What I’ve 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.
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 or a large(r) fr value (10fr, 20fr, etc):
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!
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 the 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 it simply by switching outer lanes of your template to 0.5fr (the 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.)
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 completely, you can set them to 0fr. But I personally like to have a tiny border on mobile views. It just makes the content lane look better in my opinion.
Once all of the steps above are followed… When squeezed to a smaller space you should arrive at something like this (above).
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
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.
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.
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.
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.
For More Weekly Freemium…
You can follow me on Twitter for weekend PDF giveaways.
You can follow me on Facebook for free coding stuff.
Limited Time Offer
The diagrams in this tutorial were influenced directly by the manuscript!
Medium Readers Only:
== grab a copy ==
Contains all CSS properties.