Back in March of 2017, browsers began to roll out the much-anticipated CSS Grid Layout spec. It's something lots of people had been waiting for and it's glorious. It gives us freedom from using bulky CSS Frameworks just for their awesome grid capabilities. It also keeps us from hacking up Flexbox for gridding purposes--something it could do but wasn't meant for.

I taught myself HTML just before HTML4 hit. Yes, a long time ago. I also learned CSS right after and was creating sites around the time of the CSS Zen Garden's inception. That's almost 20 years ago, if you're counting. The whole time since then I've dreamed about a day when I'd be able to translate what I was doing in newspaper layout to the Web. Now, that day has finally come. Here are a few examples of advanced layouts that I've made using CSS Grid:

London Fashion Week Article

Communication Arts Magazine Cover

Overlapping Circles Header

Red Grid

View a collection of CSS Grid Layouts

Many of the layouts in my head, or that I've taken for the work above, have been magazine style layouts. These are now possible with Grid. However, we don't work in a fixed-artboard space (like a magazine or newspaper). In Web Design we have to consider multiple screens sizes and densities as well as multiple types of content. So not every layout is going to look good across many devices. That's why I've tried to think about which types of layouts might look good for pages or sections of content.

You can view those pens in this collection

Finally, I started learning Grid back in October of 2016 but I know many developers are just beginning to learn the specification. To help with that, I've created a YouTube playlist where I'm adding videos about learning the basics of CSS Grid Layout. I am planning to add some examples of different types of grids that can be made with CSS Grid. Right now the videos are about learning the basics of the spec, which should be more than enough to get you started.

Watch CSS Grid Layout videos on YouTube

I'd love to hear your initial thoughts on CSS Grid Layout. What's the most challenging part? What are you most excited about? Leave a comment below.


1,088 2 13