Grid is all about the container

I’ve been at Render Conference in Oxford with my first conference presentation on Grid, since it shipped into browsers this month. A short talk, I decided to deal with the most frequently asked of frequently asked questions:

I’ve explained the difference between grid and flexbox on this site, and also in an answer on my CSS Grid AMA. However now I’m starting to see people actually use grid for real, I realise that one of the places people are confused points to a fundamental difference in grid to everything that has come before.

Our layout methods have always been about the item

Everything else we do concentrates on the item in the layout. To create a float grid, you need to give the items in the layout a width and float them. The same is true for inline-block. Even flex items - while we create a flex layout on the container - if you want to start trying to make a grid you need to add widths or use the flex properties on the item that you are trying to place.

Grid is different. With grid you create layout and do space distribution on the container. The items then fit into that layout.

Unless your layout can be completely auto-placed, you are going to target the items in some way. However you are then controlling how they sit in that space you have created, as opposed to using the items themselves to force the size of columns.

In practice, I am finding that this turns out to be a big reason to choose grid over flexbox - even if you are essentially laying something out in one dimension. If you want to control the size and spacing of the items from the container, that’s what grid does really well.

The slides and code examples from my talk are online, and there will be a video posted soon.

The CSS Layout Online Workshop

If you are ever baffled by floats, puzzled by collapsing margins or want to understand what is happening under the hood of a framework, this course is for you.
Jeff Spicer on the 29 Apr 2017:

That’s very interesting. I come from Adobe Flex, where these types of layouts were commonplace… with the decline of Flash Player, I’m glad to see that layout containers like this are coming back. I’m actually making on in GameMaker to run in HTML5.

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.