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:

• Why is grid different to flexbox?
• How do I get started with grid?
• What about those old browsers?

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.