New Tools for CSS Layout Rachel Andrew @rachelandrew Slides & Code at https://noti.st/rachelandrew

I do web stuff. Web developer since 1996, teaching CSS for almost as long. Co-founder Perch CMS & Notist. Author or co-author of 23 books on web development. Smashing Magazine Editor in Chief. Writer for MDN. CSS Working Group Invited Expert. Google Developer Expert. I like long runs and small airplanes. Slides & Code at https://noti.st/rachelandrew

A layout system for CSS For the first time! Slides & Code at https://noti.st/rachelandrew

A layout system for CSS Flexbox Grid Layout Multiple-column Layout Floats CSS Positioned Layout Slides & Code at https://noti.st/rachelandrew

Brought together by … Box Alignment Intrinsic and Extrinsic Sizing Logical Properties and Values Slides & Code at https://noti.st/rachelandrew

Flexbox Layout in one dimension. A row or a column. Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/qMYqYL Inline Dimension Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/XPqjpX Block Dimension Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/JavRqM Block Dimension Slides & Code at https://noti.st/rachelandrew

Start Left to Right Slides & Code at https://noti.st/rachelandrew

Start Right to Left Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/GXdjNd Inline Slides & Code at https://noti.st/rachelandrew Block

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/ZMoBGe Inline Slides & Code at https://noti.st/rachelandrew Block

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/dqeOXg Inline Slides & Code at https://noti.st/rachelandrew Block

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/VGxmKq Slides & Code at https://noti.st/rachelandrew

CSS Grid Layout Layout in two dimensions. Rows and Columns. Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/mGLOKd Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

Firefox Grid Inspector https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/PdebXZ Inline Slides & Code at https://noti.st/rachelandrew Block

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/mGLRRr Inline Slides & Code at https://noti.st/rachelandrew Block

Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/GXdWpQ Slides & Code at https://noti.st/rachelandrew

https://codepen.io/rachelandrew/pen/GXdWpQ Left to Right Slides & Code at https://noti.st/rachelandrew Right to Left

A true system for layout Designed for the job. Writing mode aware. Consistent. Slides & Code at https://noti.st/rachelandrew

What’s next? CSS Grid Level 2 “subgrids” Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

What’s next? Logical Properties & Values Slides & Code at https://noti.st/rachelandrew

Slides & Code at https://noti.st/rachelandrew

What’s next? Box Alignment in Block Layout Slides & Code at https://noti.st/rachelandrew

What’s next? What’s important to you? Slides & Code at https://noti.st/rachelandrew

Thank you! https://noti.st/rachelandrew/tJeWKI Slides & Code at https://noti.st/rachelandrew