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:
CSS Layout Workshop → goo.gle/3BmBoXR
Speaker: Rachel Andrew
Watch more:
Watch all Chrome Developer Summit videos → goo.gle/cds21-...
Subscribe to Google Chrome Developers → goo.gle/Chrome...
#ChromeDevSummit

[@batchrocketproject4720]

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.

[@nikolaypetrov9789]

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

[@palanivisu1344]

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

[@mariamm.s532]

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

[@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.

[@bangwail1510]

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

[@KonRud5]

=============================
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`

[@mdhridoy-dw8sc]

so many clear understandable and smooth , thanks google comunity

[@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.

[@OlegYuzvik]

Thanks Rachel! You explain very well!

[@Skatox]

Nice workshop!

[@Oli312]

Awesome content, thank you very much for this.

[@eno1796]

cant wait to see an event

[@tamalchowdhury]

Good one. I participated this workshop.

[@MythicEcho]

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

[@AlexanderBarakhov]

Thanks a lot Rachel!

[@user-jt7wb3zc1m]

Thank you, Good Corp!

[@rajrupani6124]

Loved it 🔥🔥

[@Taylor-hu2no]

Thank you!

[@havefun5519]

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.

[@user80204]

really thank you very much

[@walterhafner2910]

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

[@adnuzzolillo]

Very helpfull. Thanks!

[@adil8132]

Amazing ! thanks google ✌

[@josephwong2832]

awesome !! thanks Rach

[@mutazkanaan6796]

small fonts i can not read the code

[@kalidsherefuddin]

Thanks

[@taz2392]

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

[@juanpumpkinpie6550]

[@LLMA2]

good

[@maitrikmakwana5873]

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

[@hansschenker]

css for cats?

[@user-ms8ei9le7x]

Thank the ch®️me

[@user-ms8ei9le7x]

Rachel the best teacher , Thank

[@ducksu_6243]

KITTY IN THE BACK

[@karlroth7082]

Hem. Hem hem.. helllooooo!

[@genesistv5912]

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

[@webdeveloperninja9220]

cat!

[@lacasadeacero]

so, who is gonna develop internet on 10 years later?

[@cheng6523]

🤣 "Centring: one of the hardest problems in web development."

[@pratibhalovesu]

This video is not mobile friendly... 😂😂😂

[@memaimu]

I may have disliked this video, but no one will ever know for sure... :)

[@burya_]

so that was you?! this video has only 1 dislike so far. "Return TH-cam Dislike" chrome plugin is still working ;)

[@memaimu]

@@burya_ Didn't realize that was a thing. Pretty cool. I dislike censorship, so I'm definitely getting this.

[@kalidsherefuddin]

Thanks