CSS Grid layout: multiply & conquer — or how to actually design using The Grid.

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

Basic Ideas Behind Column Division

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

Responsive Grid + Going Mobile

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

Going Mobile

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.

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.

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.

Final Words

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

For More Weekly Freemium…

You can follow me on Twitter for weekend PDF giveaways.

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

--

--

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