The fundamentals of CSS layout | Workshop

Learn about the key CSS layout methods of flexbox and grid. Discover how these layout methods enable responsive, content-aware designs, and how to choose the best layout method for the component you need to build.

Resources:

Speaker: Rachel Andrew

Watch more:

#ChromeDevSummit

[batchrocketproject]

Paused at 20:00 to get a coffee - this one is worth full attention, a gold-mine of clear, logically-progressed information that I know will save hours of frustration. Thank you very much for sharing.

[KwadwoFirempongBoakye]

Thank you Rachel. Been studying CSS for the past month and this has answered a lot of the questions around the mechanics of both grid and flex layouts. Brilliant resource and info shared.

[mikeniimon]

Wow, Rachel this was immensely helpful. I realize now how little I knew and all the irritating "bugs" I now understand aren't bugs 😅. This breakdown has saved me an a lot of time, and given me a lot more confidence.

[mariamm.s]

this workshop is a must if you’re new to web development

[nikolaypetrov]

Thanks. I already knew most of it, but it's still very interesting to listen an expert passionately talking about tech.

[KonRud]

Grid Timeline (highlights)


7:23 - `auto` size
8:37 - `min-content` / `max-content `
10:53 - `fit-content()`
14:47 - `minmax(0, 1fr)` - forces a track to be the fraction of the available space
47:33 - align or justify? [`align-*` for block axis. `justify-*` for inline axis]


Flexbox Timeline (highlights)


1:06:18 - alignment in flexbox - `justify-*` [on the main axis] / `align-*` [on the cross axis]
1:16:09 - `flex` property in depth
1:18:42 - equal items in flexbox - `flex: 1 1 0`

[palanivisu]

one of the best tutorial I have come across. I was a trail and error css user but this gave good fundamental understanding. very useful thanks VM

[bangwail]

Thank you Rachel, I learned a lot about css with you !

[mdhridoy-dwsc]

so many clear understandable and smooth, thanks google comunity

[bennychewDev]

Thank you for sharing this talk! I have learned a bunch of new things. Things I have been holding off learning (grid-column: 1 / 3 etc), but have now learned thanks to the clear explanation.

[sacrajah]

I am impressed with your basic presentation of grid n flex in layout.

[dondogoberto]

Thanks for the fundamentals perspective! i love to learn from there.

[Oli]

Awesome content, thank you very much for this.

[tamalchowdhury]

Good one. I participated this workshop.

[walterhafner]

wish I knew this minmax(0, 1fr) thing before I started adding Content to my grid...
every container blew up and I ended up adding max height width to every single one of them

[havefun]

I like grid system gap property, however, seems flexbox is still more popular than grid at least for simple basic layout, flexbox is still easier.

[MythicEcho]

loved the workshop. But the cat have more patience than me.

[taz]

We really need sub grid, firefox has it why don't the rest?

[maitrikmakwana]

It's better to learn to code then to write code (webflow, i mean)

[genesistv]

nobody told her Rachel to be placed above or below and minimized since we are interested in seeing the code and not her ..