The New CSS Layout

A presentation at W3C Developer Meetup in October 2018 in Lyon, France by Rachel Andrew

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

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

Slide 8

https://codepen.io/rachelandrew/pen/qMYqYL Inline Dimension .flex { display: flex; width: 500px; } Slides & Code at https://noti.st/rachelandrew

Slide 9

.flex { writing-mode: vertical-rl; display: flex; width: 500px; } Slides & Code at https://noti.st/rachelandrew

Slide 10

https://codepen.io/rachelandrew/pen/XPqjpX Block Dimension .flex { writing-mode: vertical-rl; display: flex; width: 500px; } Slides & Code at https://noti.st/rachelandrew

Slide 11

.flex { writing-mode: vertical-rl; display: flex; flex-direction: column; } Slides & Code at https://noti.st/rachelandrew

Slide 12

https://codepen.io/rachelandrew/pen/JavRqM .flex { writing-mode: vertical-rl; display: flex; flex-direction: column; } Slides & Code at https://noti.st/rachelandrew Block Dimension

Slide 13

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

Slide 14

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

Slide 15

.flex { display: flex; width: 500px; justify-content: flex-end; } .flex-vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; } Slides & Code at https://noti.st/rachelandrew

Slide 16

https://codepen.io/rachelandrew/pen/GXdjNd .flex { display: flex; width: 500px; justify-content: flex-end; } .flex-vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; } Slides & Code at https://noti.st/rachelandrew Inline Block

Slide 17

.flex { display: flex; width: 500px; justify-content: space-between; } .flex-vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; } Slides & Code at https://noti.st/rachelandrew

Slide 18

https://codepen.io/rachelandrew/pen/ZMoBGe .flex { display: flex; width: 500px; justify-content: space-between; } .flex-vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; } Slides & Code at https://noti.st/rachelandrew Inline Block

Slide 19

.flex { display: flex; align-items: flex-start; } .flex-vertical { writing-mode: vertical-rl; } Slides & Code at https://noti.st/rachelandrew

Slide 20

https://codepen.io/rachelandrew/pen/dqeOXg .flex { display: flex; align-items: flex-start; } .flex-vertical { writing-mode: vertical-rl; } Slides & Code at https://noti.st/rachelandrew Inline Block

Slide 21

.flex { display: flex; align-items: center; justify-content: center; } Slides & Code at https://noti.st/rachelandrew

Slide 22

https://codepen.io/rachelandrew/pen/VGxmKq .flex { display: flex; align-items: center; justify-content: center; } Slides & Code at https://noti.st/rachelandrew

Slide 23

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

Slide 24

.grid { display: grid; width: 500px; grid-template-columns: .2fr .2fr .4fr; grid-template-rows: 100px 100px; grid-gap: 20px; } Slides & Code at https://noti.st/rachelandrew

Slide 25

https://codepen.io/rachelandrew/pen/mGLOKd .grid { display: grid; width: 500px; grid-template-columns: .2fr .2fr .4fr; grid-template-rows: 100px 100px; grid-gap: 20px; } Slides & Code at https://noti.st/rachelandrew

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

.grid { display: grid; width: 500px; height: 300px; grid-template-columns: .2fr .2fr .4fr; grid-template-rows: 100px 100px; grid-gap: 20px; justify-content: end; align-content: center; } .grid.vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; block-size: 300px; } Slides & Code at https://noti.st/rachelandrew

Slide 30

https://codepen.io/rachelandrew/pen/PdebXZ .grid { display: grid; width: 500px; height: 300px; grid-template-columns: .2fr .2fr .4fr; grid-template-rows: 100px 100px; grid-gap: 20px; justify-content: end; align-content: center; } .grid.vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; block-size: 300px; } Slides & Code at https://noti.st/rachelandrew Inline Block

Slide 31

.grid { display: grid; width: 500px; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 100px 100px; grid-gap: 20px; align-items: start; justify-items: end; } .grid.vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; } Slides & Code at https://noti.st/rachelandrew

Slide 32

https://codepen.io/rachelandrew/pen/mGLRRr .grid { display: grid; width: 500px; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 100px 100px; grid-gap: 20px; align-items: start; justify-items: end; } .grid.vertical { writing-mode: vertical-rl; width: auto; inline-size: 500px; } Slides & Code at https://noti.st/rachelandrew Inline Block

Slide 33

.grid { display: grid; width: 500px; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 100px 100px 100px; grid-gap: 20px; } .grid.rtl { direction: rtl; } .grid div:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .grid div:nth-child(2) { grid-column: -1 / -3; grid-row: -1 / -3; } Slides & Code at https://noti.st/rachelandrew

Slide 34

https://codepen.io/rachelandrew/pen/GXdWpQ .grid { display: grid; width: 500px; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 100px 100px 100px; grid-gap: 20px; } .grid.rtl { direction: rtl; } .grid div:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .grid div:nth-child(2) { grid-column: -1 / -3; grid-row: -1 / -3; } Slides & Code at https://noti.st/rachelandrew

Slide 35

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

Slide 36

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

Slide 37

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

Slide 38

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

Slide 39

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

Slide 40

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

Slide 41

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

Slide 42

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

Slide 43

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

Slide 44

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