On auto sizes in Grid Layout
A presentation at Talk.CSS in in Singapore by Hidde de Vries
s e z i s o t u a On in Grid Layout 0 2 0 -2 0 -1 2 , S S .C K L A T , s ie r V e Hidde d
Hidde de Vries Freelance front-end developer, accessibility specialistfrom Rotterdam, Netherlands. @hdv ◇ hidde.blog
|||||||| Fixed canvas
Posters by Wim Crouwel
Photo JMB: MoMA
Photo JMB: MoMA
From: Wikipedia
Digital posters From: Emerce
Digital posters “More relevant, more local outreach to our customers” From: Emerce
Digital posters COULD! USE! CSS! From: Emerce
Digital posters From: Emerce
The web From: CERN (home.cern)
The web is everywhere, there are infinite canvases.
The web is everywhere, there are infinite canvases. And lots of languages.
The web is everywhere, there are infinite canvases. And lots of languages. And a lot of writing systems.
The web is everywhere, there are infinite canvases. And lots of languages. And a lot of writing systems. CSS is here to help!
Fixed sizes “When we define auto in CSS, we want it give reasonable results, avoid dataloss/overflow and be a good default to build on” — Fantasai, in her talk “Defining auto” Fantasai, “Defining auto” ・ http://fantasai.inkedblade.net/style/talks/defining-auto/#sizing-primitives
|||||||| TErminLOgy
Block vs inline Grid Layout is a layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. Representative Flex Layout Example Representative Grid Layout Example In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, while preserving a more ideal semantic structuring of their content across presentations. Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup
Block vs inline Grid Layout is a layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. Representative Flex Layout Example Representative Grid Layout Example In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, while preserving a more ideal semantic structuring of their content across presentations. Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup
Block vs inline Grid Layout is a layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. Representative Flex Layout Example Representative Grid Layout Example In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, while preserving a more ideal semantic structuring of their content across presentations. Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup
Block vs inline Grid Layout is a layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. Representative Flex Layout Example Representative Grid Layout Example In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, while preserving a more ideal semantic structuring of their content across presentations. Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup
Block vs inline Grid Layout is a layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. Representative Flex Layout Example Representative Grid Layout Example In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, while preserving a more ideal semantic structuring of their content across presentations. Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup
Block vs inline (In left to right, top to bottom layout) Grid Layout is a layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. Representative Flex Layout Example Representative Grid Layout Example In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space, while preserving a more ideal semantic structuring of their content across presentations. Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup
Writing modes Latin-based Mongolian-based or Han-based Arabic-based CSS Writing Modes Level 4 ・ https://www.w3.org/TR/css-writing-modes-4/#writing-mode
Writing modes Latin-based Mongolian-based or Han-based Arabic-based CSS Writing Modes Level 4 ・ https://www.w3.org/TR/css-writing-modes-4/#writing-mode
Vertical type on the web still tricky
Vertical type on the web still tricky “Unfortunately, 10 minutes into the attempt, I broke my brain. ”
Writing modes “I’ve found understanding Writing Modes incredibly helpful when understanding Flexbox and CSS Grid” — Jen Simmons, in “CSS Writing Modes” on 24 Ways Jen Simmons, “CSS Writing Modes” ・ https://24ways.org/2016/css-writing-modes/
Writing modes Latin-based Mongolian-based or Han-based Arabic-based CSS Writing Modes Level 4 ・ https://www.w3.org/TR/css-writing-modes-4/#writing-mode
Writing modes .grid { writing-mode: writing-mode: writing-mode: Latin-based writing-mode: writing-mode: } horizontal-tb; vertical-rl; vertical-lr; Mongolian-based sideways-rl; sideways-lr; or Han-based Arabic-based CSS Writing Modes Level 4 ・ https://www.w3.org/TR/css-writing-modes-4/#writing-mode
|||||||| THe Grid ConTAiner
Creating a Grid .grid { display: grid; } grid-template-columns: 200px 5cm 10cm 500px 5cm; 100px; }
Inline size
Inline size section
Inline size <!—- width: 100% of window -—> <section></section> section
Inline size section div <!—- width: 100% of window -—> <section> <!—- width: also 100% of window -—> <div style=”display: grid;”> </div>
Inline size section <!—- width: 500px -—> <section style=”width: 500px;”> </section>
Inline size section div <!—- width: 500px -—> <section style=”width: 500px;”> <!—- width: also 500px -—> <div style=”display: grid;”> </div>
Inline size (float) section div <!—- width: 100% of window -—> <section> <!—- width: also 100% of window -—> <div style=”display: grid;”> </div>
Inline size (float) section <!—- width: 100% of window -—> <section> <!—- width: [?] -—> <div style=”display: grid; float: left;”> </div>
Inline size (posabs) section <!—- width: 100% of window -—> <section> <!—- width: [?] -—> <div style=”display: grid; position: absolute;”> </div>
Inline size (posabs) hello world section <!—- width: 100% of window -—> <section> <!—- width: as much as content requires -—> <div style=”display: grid; position: absolute;”> hello world
Inline grid hello world section <!—- width: 100% of window -—> <section> <!—- width: as much as content requires -—> <div style=”display: inline-grid;”> hello world
|||||||| Grid conTAiner inLIne
|||||||| Grid conTAiner inLIne Size of containing element WHEN — grid has no explicit width
|||||||| Grid conTAiner inLIne Size of containing element WHEN — grid has no explicit width Size that the content needs WHEN — float or position:absolute — inline-grid has no explicit width
|||||||| Grid conTAiner inLIne Size of containing element WHEN — grid has no explicit width Size that the content needs WHEN — float or position:absolute — inline-grid has no explicit width Size that you specified WHEN — you specified a size
|||||||| Grid conTAiner bLOck size
|||||||| Grid conTAiner bLOck size Size of containing element WHEN — position:absolute and it has height 100%
|||||||| Grid conTAiner bLOck size Size of containing element WHEN — position:absolute and it has height 100% Size that the content needs WHEN — no exception applies
|||||||| Grid conTAiner bLOck size Size of containing element WHEN — position:absolute and it has height 100% Size that the content needs WHEN — no exception applies Size that you specified WHEN — you specified a size
|||||||| Grid Tracks
|||||||| Grid Tracks coLUmns / rows
Creating columns .grid { display: grid; grid-template-columns: 100px 5cm 10cm 200px 500px 400px 5cm; 100px; 200px; }
Creating rows .grid { display: grid; grid-template-columns: grid-template-rows: 100px 5cm400px 200px 10cm 500px 5cm; 200px; 100px; }
|||||||| Grid Tracks: FIXED
Fixed sizes .grid { display: grid; grid-template-columns: 5cm 10cm 5cm; }
Fixed sizes .grid { display: grid; grid-template-columns: 200px 5cm 10cm 500px 5cm; 100px; }
Fixed sizes .grid { display: grid; grid-template-columns: 50em 5cm 10cm 200px 120ch 500px 5cm; 50rem; 100px; }
Fixed sizes .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE ABSOLUTE .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes ABSOLUTE RELATIVE — em — ex — ch — rem font .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm — mm —Q — in — pc — pt — px .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm — mm —Q — in — pc — pt — px 1cm = 96px/2.54 .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm — mm —Q — in — pc — pt — px 1cm = 96px/2.54 1mm = 1/10th of 1cm .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm 1cm = 96px/2.54 — mm 1mm = 1/10th of 1cm — Q 1Q = 1/40th of 1cm — in — pc — pt — px .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm 1cm = 96px/2.54 — mm 1mm = 1/10th of 1cm — Q 1Q = 1/40th of 1cm — in 1in = 2.54cm = 96px — pc — pt — px .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm 1cm = 96px/2.54 — mm 1mm = 1/10th of 1cm — Q 1Q = 1/40th of 1cm — in 1in = 2.54cm = 96px — pc 1pc = 1/6th of 1in — pt — px .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm 1cm = 96px/2.54 — mm 1mm = 1/10th of 1cm — Q 1Q = 1/40th of 1cm — in 1in = 2.54cm = 96px — pc 1pc = 1/6th of 1in — pt 1pt = 1/72th of 1in — px .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes RELATIVE — em — ex font — ch — rem — vw — vh viewport — vmin — vmax ABSOLUTE — cm 1cm = 96px/2.54 — mm 1mm = 1/10th of 1cm — Q 1Q = 1/40th of 1cm — in 1in = 2.54cm = 96px — pc 1pc = 1/6th of 1in — pt 1pt = 1/72th of 1in — px 1px = 1/96th of 1in .grid { display: grid; grid-template-columns: /* use any size here */; } CSS Values and Units Module Level 3 ・ https://www.w3.org/TR/css-values-3/
Fixed sizes “In CSS sizing primitives, a fixed size means a size that is independent of layout or content” — Fantasai, in her talk “Defining auto” Fantasai, “Defining auto” ・ http://fantasai.inkedblade.net/style/talks/defining-auto/#sizing-primitives
Fixed track sizes
Fixed track sizes
Fixed track sizes
Fixed track sizes
|||||||| Grid Tracks: FRACTIONS
Fractions This is not auto .grid { display: grid; grid-template-columns: 50em 1fr 10em; }
Sizing with fractions
Sizing with fractions
This default is a feature, usually you don’t want text on top of other text.
Sizing with fractions The distribution of leftover space occurs after all nonflexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flexsized rows and columns in proportion to their flex factor. in “CSS Grid Layout Module Level 1” Tab Atkins Jr., Elika J. Etemad / fantasai, Rossen Atanassov “CSS Grid Layout Module Level 2” ・ https://www.w3.org/TR/css-grid-2/
Sizing with fractions The distribution of leftover space occurs after all nonflexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flexsized rows and columns in proportion to their flex factor. in “CSS Grid Layout Module Level 1” Tab Atkins Jr., Elika J. Etemad / fantasai, Rossen Atanassov “CSS Grid Layout Module Level 2” ・ https://www.w3.org/TR/css-grid-2/
Sizing with fractions The distribution of leftover space occurs after all nonflexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flexsized rows and columns in proportion to their flex factor. in “CSS Grid Layout Module Level 1” Tab Atkins Jr., Elika J. Etemad / fantasai, Rossen Atanassov “CSS Grid Layout Module Level 2” ・ https://www.w3.org/TR/css-grid-2/
Sizing with fractions
Sizing with fractions
One cell in a track can affect the whole track’s size.
Sizing with fractions “If you [don’t want your track to grow to prevent overflow], you can do so by making 0 the first value in minmax(). ” — Rachel Andrew, in “CSS Writing Modes” on 24 Ways Rachel Andrew, “How big is that box?” ・ https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/
Fractions .grid { display: grid; grid-template-columns: 50em 1fr 10em; }
Fractions .grid { display: grid; grid-template-columns: 50em minmax(0, 1fr) 10em; }
|||||||| Grid Tracks: keywords
min-content
min-content
max-content
fit-content(value)
|||||||| Grid Tracks: AUTO
Auto track size .grid { display: grid; grid-template-columns: 50em auto 10em; }
Auto is what you’ll get if you don’t size your track. (Overridable with grid-auto-rows / grid-auto-columns)
Auto track size .grid { display: grid; }
Auto track size Maximum track size: of all grid items, pick the one with the largest max-content. This is your track size.
Auto track size Maximum track size: of all grid items, pick the one with the largest max-content. This is your track size. Penne Spaghetti Farfalle
Auto track size Maximum track size: of all grid items, pick the one with the largest max-content. This is your track size. Penne Cannelloni Farfalle
Auto track size Minimum track size: pick the grid item with the largest minimum* size. That’s your track’s minimum size. Penne Cannelloni Farfalle
Auto track size Minimum track size: pick the grid item with the largest minimum* size. That’s your track’s minimum size. * min-width/min-height value Penne Cannelloni Farfalle
Auto track size Minimum track size: pick the grid item with the largest minimum* size. That’s your track’s minimum size. * min-width/min-height value ** usually like min-content Penne Cannelloni Farfalle
|||||||| Grid tracks
|||||||| Grid tracks Size you specified WHEN — you use fixed sizing units (relative or absolute)
|||||||| Grid tracks Size you specified WHEN — you use fixed sizing units (relative or absolute) u o y n a h t e r o M specified WHEN — there’s a long word
|||||||| Grid tracks Size you specified WHEN — you use fixed sizing units (relative or absolute) u o y n a h t e r o M specified WHEN — there’s a long word Something perfect WHEN — you’ve given the browser flexibility: keywords, fractions, auto.
|||||||| Grid ITEms
Grid item size depends on alignment.
Alignment is what happens when you have more space than content.
Alignment is what happens when you have more space than content.
Alignment is what happens when you have more space than content.
Alignment is what happens when you have more space than content. You can only do it if you have more space, because if there is text everywhere, it cannot align.
Alignment is what happens when you have more space than content. You can only do it if you have more space, because if there is text everywhere, it cannot align.
Alignment is what happens when you have more space than content. You can only do it if you have more space, because if there is text everywhere, it cannot align.
A grid with five items
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> div { display: grid; grid-template-columns: 1fr 2fr 50ch 2fr; grid-template-rows: 1fr; background-color: gold; min-height: 80vh; }
A grid with five items The default alignment is stretch, so all whitespace is used.
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> div { display: grid; grid-template-columns: 1fr 2fr 50ch 2fr; grid-template-rows: 1fr; background-color: gold; min-height: 80vh; }
A grid with five items
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; }
A grid with five items
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; }
A grid with five items The default alignment is stretch, so all whitespace is used.
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; }
!stretch (start)
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; align-self: start; }
!stretch (start) If grid items are aligned other than stretch, their size is what is needed.
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; align-self: start; }
!stretch (start) If grid items are aligned other than stretch, their size is what is needed.
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; margin-bottom: auto; }
!stretch (start) If grid items are aligned other than stretch, their size is what is needed.
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; margin-block-end: auto; }
!stretch (end) If grid items are aligned other than stretch, their size is what is needed.
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; align-self: end; }
!stretch (end) If grid items are aligned other than stretch, their size is what is needed. The cell they are in can still be larger.
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; align-self: end; }
|||||||| Grid ITEms
|||||||| Grid ITEms Size of track WHEN — item is aligned “stretch”
|||||||| Grid ITEms Size of track WHEN — item is aligned “stretch” Size that the s d e e n t n e t n o c WHEN — item is aligned in a way that leaves whitespace
|||||||| Grid ITEms Size of track WHEN — item is aligned “stretch” Size that the s d e e n t n e t n o c WHEN — item is aligned in a way that leaves whitespace , or has an auto margin that returns whitespace to the track
|||||||| ConcLUding…
Grid Layout helps with more international CSS, by being less physical.
Grid Layout helps with more international CSS, by being less physical. For websites, letting the browser decide flexibly, can make your life easier.
MORE READING/WATCHING ‣ Tab Atkins Jr., Elika J. Etemad / fantasai, Rossen Atanassov “CSS Grid Layout Module Level 2” (https:// www.w3.org/TR/css-grid-2/) ‣ Rachel Andrew, “How Big Is That Box? Understanding Sizing In CSS Layout” (https:// www.smashingmagazine.com/2018/01/understandingsizing-css-layout/) ‣ Elika J. Etemad (fantasai), “Defining auto” (https:// vimeo.com/134597090) ‣ Hui Jing Chen, “Vertical typesetting with writing-mode revisited” (https://chenhuijing.com/blog/verticaltypesetting-revisited/#%F0%9F%91%9F) ‣ Rachel Andrew, “Writing Modes and CSS Layout” (https://www.smashingmagazine.com/2019/08/ writing-modes-layout/) ‣ Jen Simmons, “CSS Writing Modes” (https:// 24ways.org/2016/css-writing-modes/)
MORE READING/WATCHING ‣ Tab Atkins Jr., Elika J. Etemad / fantasai, Rossen Atanassov “CSS Grid Layout Module Level 2” (https:// www.w3.org/TR/css-grid-2/) ‣ Rachel Andrew, “How Big Is That Box? Understanding Sizing In CSS Layout” (https:// www.smashingmagazine.com/2018/01/understandingsizing-css-layout/) ‣ Elika J. Etemad (fantasai), “Defining auto” (https:// vimeo.com/134597090) ‣ Hui Jing Chen, “Vertical typesetting with writing-mode revisited” (https://chenhuijing.com/blog/verticaltypesetting-revisited/#%F0%9F%91%9F) ‣ Rachel Andrew, “Writing Modes and CSS Layout” (https://www.smashingmagazine.com/2019/08/ writing-modes-layout/) ‣ Jen Simmons, “CSS Writing Modes” (https:// 24ways.org/2016/css-writing-modes/) Slides: https://talks.hiddedevries.nl Questions: @hdv Thank you!
Video
Code
The following code examples from the presentation can be tried out live.
Resources
The following resources were mentioned during the presentation or are useful additional information.
Buzz and feedback
Here’s what was said about this presentation on social media.
