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!

Remember:

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.

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!

CSS Visual Dictionary 28% OFF for Medium readers.

28% OFF

Medium Readers Only:

CSS Visual Dictionary

== grab a copy ==

Contains all CSS properties.