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.

♡ Likes

Ross Young ⚜️ Geoffrey Pay Paul Grant Valentino Camaro Oriol Kevin MacKenzie stonecobra 1wrocketship Joynal Abedin Roberto Baca Fatih Kalifa Brandon — Bee Design Imran Ahmad Xavier Moore 👁‍🗨 Carina Saurav Mittal Michael D Amy Kvistad Natalie Chin Mark Stanley Chris Droom TiTox Eduardo Peredo anchnk harshit purwar Aram Bhusal Ron Goris Uziel Bueno Nick Miller Jorge Blázquez Anna Fuster Brad Frost Dyn Michał Gołębiowski Paul Howells (((Struan King))) Ibrahim Hajo Bryan Ennis Martin Wojtala Dan Flynn Cho S. Kim Kelvin Ling Yann Isabel nanad Benoit Larocque Alex od Bosne AndreaDSW Simon Plant Tim Naftali Friedman 🙂 Naftali Friedman 🙂 jesterhead Dev Mukherjee Kai Jacobsen Marko Čakarević Melissa

↺ Reposts

Imran Ahmad Alia Adel Alia Adel Chris Heilmann Daniel H Pavey Derren Wilson Uziel Bueno Doug Collins Yann Isabel Benoit Larocque nanad nanad nanad AndreaDSW Naftali Friedman 🙂 Romain G jesterhead Becky Lingafelter

🗨 Comments

Melissa on the 11 Nov 2017:

GDGLondon part 2

V8 Internals For JavaScript Developers by @mathias

Solving Layout Problems With CSS Grid And Friends by @rachelandrew

#DevFest17 #GDGLondon

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.