Does it work? Using the new CSS Layout

A presentation at Finch Front-end in September 2019 in Edinburgh, UK by Rachel Andrew

Does it work? Rachel Andrew @ Finch Front-End Slides & resources https://noti.st/rachelandrew

Slides & resources https://noti.st/rachelandrew

CSS is too trivial for real developers to worry about, yet too hard for them to understand. Slides & resources https://noti.st/rachelandrew

CSS is unique, and amazing. Slides & resources https://noti.st/rachelandrew

We can’t break the web Slides & resources https://noti.st/rachelandrew

Modern CSS can be minimal So you really need to understand what those few lines do. Slides & resources https://noti.st/rachelandrew

Normal Flow The no-layout layout. Slides & resources https://noti.st/rachelandrew

Source order matters Slides & resources https://noti.st/rachelandrew

Tab stop visualization with https://accessibilityinsights.io/ Slides & resources https://noti.st/rachelandrew

Get your source ordered Work with document flow and CSS is much simpler. Slides & resources https://noti.st/rachelandrew

“Grid or Flexbox” This is a terrible question. Slides & resources https://noti.st/rachelandrew

Columns Slides & resources https://noti.st/rachelandrew

“He then employed the little-used CSS “float” property to float the content to the desired width” Slides & resources https://noti.st/rachelandrew

“ It uses float:left, suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed” Slides & resources https://noti.st/rachelandrew

Multi-column Layout Slides & resources https://noti.st/rachelandrew

.columns { column-count: 3; } Slides & resources https://noti.st/rachelandrew

section { break-inside: avoid; } Slides & resources https://noti.st/rachelandrew

h2 { column-span : all; } Slides & resources https://noti.st/rachelandrew

.columns { column-width: 250px; } Slides & resources https://noti.st/rachelandrew

Width is a minimum Column boxes are flexible by default. Slides & resources https://noti.st/rachelandrew

display Slides & resources https://noti.st/rachelandrew

.flex { display: flex; } Slides & resources https://noti.st/rachelandrew

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

.grid { display: inline-grid; } Slides & resources https://noti.st/rachelandrew

Old & new values for display Old Value New Value(s) block block flow flow-root block flow-root inline inline flow inline-block inline flow-root flex block flex inline-flex inline flex grid block grid inline-grid inline grid
Full list at https://developer.mozilla.org/en-US/docs/Web/CSS/display Slides & resources https://noti.st/rachelandrew

.flex { display: block flex; } Slides & resources https://noti.st/rachelandrew

.grid { display: block grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

.grid { display: inline grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

.grid { display: block flow; } Slides & resources https://noti.st/rachelandrew

display: block flow-root Creating a new Block Formatting Context (BFC) Slides & resources https://noti.st/rachelandrew

.container { display: block flow-root; } Slides & resources https://noti.st/rachelandrew

display: inline-block Slides & resources https://noti.st/rachelandrew

<div> <span class=”inline”> <img src=”pxcat.jpg”>I am an inline thing </span> I follow the inline thing. <br>I am below the inline thing. </div> Slides & resources https://noti.st/rachelandrew

.inline { backgroundcolor: rgb(71, 73, 84); color: #fff; padding: 1em; } .inline img { float: left; } Slides & resources https://noti.st/rachelandrew

.inline { backgroundcolor: rgb(71, 73, 84); color: #fff; padding: 1em; display: inline-block ; } .inline img { float: left; } Slides & resources https://noti.st/rachelandrew

.inline { backgroundcolor: rgb(71, 73, 84); color: #fff; padding: 1em; display: inline flow-root; } .inline img { float: left; } Slides & resources https://noti.st/rachelandrew

Two-value syntax of display Implemented in Firefox 70 Slides & resources https://noti.st/rachelandrew

display: flex Slides & resources https://noti.st/rachelandrew

.flex { display: flex; } .flex > div { flex: 1; } Slides & resources https://noti.st/rachelandrew

A flex-basis of 0 means items contribute no size. Slides & resources https://noti.st/rachelandrew

.flex { display: flex; flex-wrap: wrap; } .flex > div { flex: 1 1 200px; } Slides & resources https://noti.st/rachelandrew

.flex { display: flex; flex-wrap: wrap; } .flex > div { flex: 0 0 33.3333%; } Slides & resources https://noti.st/rachelandrew

Flexbox is more than floats with alignment. Which we discover when we stop trying to make it a grid. Slides & resources https://noti.st/rachelandrew

flex: auto Slides & resources https://noti.st/rachelandrew

auto Lay the items out at max-content size, then remove or add space in proportion. Slides & resources https://noti.st/rachelandrew

.flex { display: flex; justify-content: space-between; } Slides & resources https://noti.st/rachelandrew

<ul class=”list-group”> <li>Item One <span class=”badge”>2</span> </li> <li>Item Two <span class=”badge”>11</span> </li> <li>Item Three <span class=”badge”>4</span> </li> <li>Item Four <span class=”badge”>5</span> </li> </ul> Slides & resources https://noti.st/rachelandrew

<li>Item One <span class=”badge”>2</span> </li> Slides & resources https://noti.st/rachelandrew

.list-group li { display: flex; justify-content: space-between; align-items: center; } <li>Item One <span class=”badge”>2</span> </li> Slides & resources https://noti.st/rachelandrew

“Prior to alignment via justifycontent and align-self, any positive free space is distributed to auto margins in that dimension.” Slides & resources https://noti.st/rachelandrew

nav li:last-child { margin-left: auto; } Slides & resources https://noti.st/rachelandrew

“The specification describes a CSS box model optimized for user interface design.” Slides & resources https://noti.st/rachelandrew

Writing Modes Slides & resources https://noti.st/rachelandrew

writing-mode: horizontal-tb; Inline Dimension Block Dimension Slides & resources https://noti.st/rachelandrew

writing-mode: vertical-rl; Block Dimension Inline Dimension Slides & resources https://noti.st/rachelandrew

Block Start Block Start Block End Block End Slides & resources https://noti.st/rachelandrew

Inline Start Inline End Inline Start Inline End Slides & resources https://noti.st/rachelandrew

Web layout was tied to physical dimensions. We think in top, right, bottom left, width and height. Slides & resources https://noti.st/rachelandrew

.example { width: 600px; height: 300px; } Slides & resources https://noti.st/rachelandrew

Logical Properties and Values Slides & resources https://noti.st/rachelandrew

.example { inline-size: 600px; block-size: 300px; } Slides & resources https://noti.st/rachelandrew

inline-size = width block-size = height Slides & resources https://noti.st/rachelandrew

block-size = width inline-size = height Slides & resources https://noti.st/rachelandrew

Physical v. Logical .example { padding-top: 10px; padding-right: 2em; margin-bottom: 2em; } .example { padding-block-start: 10px; padding-inline-end: 2em; margin-block-end: 2em; margin-inline: 1em; } Slides & resources https://noti.st/rachelandrew

.example { border-start-start-radius: 20px; border-start-end-radius: 3em; border-end-start-radius: 2em 4em; border-end-end-radius: 5px; } Slides & resources https://noti.st/rachelandrew

Naming things A CSS Grid superpower Slides & resources https://noti.st/rachelandrew

.media { display: grid; grid-template-columns: fit-content(200px) 1fr; grid-template-areas: “image content”; grid-gap: 20px; } .img { grid-area: image; } .content { grid-area: content; } Slides & resources https://noti.st/rachelandrew

.media-flip { grid-template-columns: 1fr fit-content(200px); grid-template-areas: “content image”; } Slides & resources https://noti.st/rachelandrew

No ‘right’ way. I like using grid for this. You might use flex. It’s all good. Slides & resources https://noti.st/rachelandrew

“Named Columns” Not a thing. Kind of a thing. Slides & resources https://noti.st/rachelandrew

In grid we name lines and we name areas. We don’t name tracks. Slides & resources https://noti.st/rachelandrew

.grid { display: grid; gap: 20px; grid-template-columns: [full-start] minmax(0,1fr) [content-start start-half-start] minmax(0,2fr) [start-half-end end-half-start] minmax(0,2fr) [end-half-end content-end] minmax(0,1fr) [full-end]; } Slides & resources https://noti.st/rachelandrew

h1 { grid-column: content-start / content-end; } .one { grid-row: 2; grid-column: start-half-start / start-half-end; } Slides & resources https://noti.st/rachelandrew

h1 { grid-column: content; } .one { grid-row: 2; grid-column: start-half; } Slides & resources https://noti.st/rachelandrew

Named lines make a named area Using the main name, with –start and –end removed. Slides & resources https://noti.st/rachelandrew

Named areas can be used as named lines The name resolves to the start or end edge of the area. Slides & resources https://noti.st/rachelandrew

grid-column: full Slides & resources https://noti.st/rachelandrew

grid-column: full / full Slides & resources https://noti.st/rachelandrew

grid-column: full-start / full-end Slides & resources https://noti.st/rachelandrew

Now add subgrid Slides & resources https://noti.st/rachelandrew

.two { grid-row: 3; grid-column: full; display: grid; grid-template-columns: subgrid; } Slides & resources https://noti.st/rachelandrew

Line names from the parent grid are inherited by the subgrid. Slides & resources https://noti.st/rachelandrew

.two-a { grid-column: start-half; } .two-b { grid-column: end-half; } Slides & resources https://noti.st/rachelandrew

More CSS. Faster implementations. Slides & resources https://noti.st/rachelandrew

Interoperability Things working the same way across browsers. Slides & resources https://noti.st/rachelandrew

Standardizing CSS Scrollbars Slides & resources https://noti.st/rachelandrew

.scroller { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgb(255,255,255) rgb(158,120,153); } Slides & resources https://noti.st/rachelandrew

Better defaults Scroll anchoring Slides & resources https://noti.st/rachelandrew

Ask why things work Avoid always copying and pasting from a cheatsheet. Slides & resources https://noti.st/rachelandrew

We’re working out how to use all this new stuff together. Slides & resources https://noti.st/rachelandrew

Thank you @rachelandrew | https://noti.st/rachelandrew/ Slides & resources https://noti.st/rachelandrew

Rachel Andrew
@rachelandrew

1 / 111

Over the past two years, we have moved from a situation where we essentially lacked a layout system for the web, to one where a complex and flexible system is emerging. A system with Grid and Flexbox as the headline features, and backed by a range of concepts and CSS properties and values which help us make sense of what it is to do layout on the web.

In this talk, we will take a look at CSS layout in a holistic way. Rather than thinking Grid or Flexbox first, we will look at the patterns we need to build, and then discover which bits of CSS we might need to use to realise them. Along the way we’ll encounter Grid, Flexbox, the BFC, Writing Modes, and some interesting things about scrolling. All part of the layout system that we now have in CSS.

Code

The following code examples from the presentation can be tried out live.

https://codepen.io/rachelandrew/pen/YzKdxeL

CSS Layout c.2000
https://codepen.io/rachelandrew/pen/QWLZYjv

Multicol with break-inside: avoid
https://codepen.io/rachelandrew/pen/eYOQEdz

Multicol column spanning fun
https://codepen.io/rachelandrew/pen/BaBGdLb

Multicol flexible column-width
https://codepen.io/rachelandrew/pen/GRKwvmw

display: flex
https://codepen.io/rachelandrew/pen/MWgzvJK

display: grid
https://codepen.io/rachelandrew/pen/BaBGdwe

display: inline-grid
https://codepen.io/rachelandrew/pen/MWgZwmE

display: block flow-root
https://codepen.io/rachelandrew/pen/GRKPJxJ

inline-block / inline flow-root
https://codepen.io/rachelandrew/pen/pozqbLq

flex: 1
https://codepen.io/rachelandrew/pen/QWLzgVV

flex wrapping
https://codepen.io/rachelandrew/pen/eYObRLw

flex "grid"
https://codepen.io/rachelandrew/pen/WNeLXPg

space-between
https://codepen.io/rachelandrew/pen/oNvQdVP

Flexbox list group
https://codepen.io/rachelandrew/pen/xxKmxYG

auto margins
https://codepen.io/rachelandrew/pen/bGbOrQX

vertical-rl
https://codepen.io/rachelandrew/pen/GRKPMJa

block-size and inline-size
https://codepen.io/rachelandrew/pen/qBWLOJN

Logical border-radius (Firefox only)
https://codepen.io/rachelandrew/pen/gOYZOEv

Media Objects
https://codepen.io/rachelandrew/pen/KKPbZZK

Naming columns 1: named lines
https://codepen.io/rachelandrew/pen/YzKdyWq

Naming columns 2
https://codepen.io/rachelandrew/pen/bGbONpz

Naming columns + subgrid
https://codepen.io/rachelandrew/pen/dybwdMg

CSS Scrollbars

Resources

The following resources were mentioned during the presentation or are useful additional information.

Link for this presentation:

HTML code for embedding:

Share on social media:

CSS Layout c.2000

Multicol with break-inside: avoid

Multicol column spanning fun

Multicol flexible column-width

display: flex

display: grid

display: inline-grid

display: block flow-root

inline-block / inline flow-root

flex: 1

flex wrapping

flex "grid"

space-between

Flexbox list group

auto margins

vertical-rl

block-size and inline-size

Logical border-radius (Firefox only)

Media Objects

Naming columns 1: named lines

Naming columns 2

Naming columns + subgrid

CSS Scrollbars