# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Hidde de Vries Freelance front-end developer, accessibility specialistfrom Rotterdam, Netherlands. @hdv ◇ hidde.blog

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Fixed canvas

# data[].attributes.slidedeck.data[].slides[].desc.html
Posters by Wim Crouwel

# data[].attributes.slidedeck.data[].slides[].desc.html
Photo JMB: MoMA

# data[].attributes.slidedeck.data[].slides[].desc.html
Photo JMB: MoMA

# data[].attributes.slidedeck.data[].slides[].desc.html
From: Wikipedia

# data[].attributes.slidedeck.data[].slides[].desc.html
Digital posters From: Emerce

# data[].attributes.slidedeck.data[].slides[].desc.html
Digital posters “More relevant, more local outreach to our customers” From: Emerce

# data[].attributes.slidedeck.data[].slides[].desc.html
Digital posters COULD! USE! CSS! From: Emerce

# data[].attributes.slidedeck.data[].slides[].desc.html
Digital posters From: Emerce

# data[].attributes.slidedeck.data[].slides[].desc.html
The web From: CERN (home.cern)

# data[].attributes.slidedeck.data[].slides[].desc.html
The web is everywhere, there are infinite canvases.

# data[].attributes.slidedeck.data[].slides[].desc.html
The web is everywhere, there are infinite canvases. And lots of languages.

# data[].attributes.slidedeck.data[].slides[].desc.html
The web is everywhere, there are infinite canvases. And lots of languages. And a lot of writing systems.

# data[].attributes.slidedeck.data[].slides[].desc.html
The web is everywhere, there are infinite canvases. And lots of languages. And a lot of writing systems. CSS is here to help!

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| TErminLOgy

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Vertical type on the web still tricky

# data[].attributes.slidedeck.data[].slides[].desc.html
Vertical type on the web still tricky “Unfortunately, 10 minutes into the attempt, I broke my brain. ”

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| THe Grid ConTAiner

# data[].attributes.slidedeck.data[].slides[].desc.html
Creating a Grid .grid { display: grid; } grid-template-columns: 200px 5cm 10cm 500px 5cm; 100px; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size section

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size <!—- width: 100% of window -—> <section></section> section

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size section div <!—- width: 100% of window -—> <section> <!—- width: also 100% of window -—> <div style=”display: grid;”> </div>

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size section <!—- width: 500px -—> <section style=”width: 500px;”> </section>

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size section div <!—- width: 500px -—> <section style=”width: 500px;”> <!—- width: also 500px -—> <div style=”display: grid;”> </div>

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size (float) section div <!—- width: 100% of window -—> <section> <!—- width: also 100% of window -—> <div style=”display: grid;”> </div>

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size (float) section <!—- width: 100% of window -—> <section> <!—- width: [?] -—> <div style=”display: grid; float: left;”> </div>

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline size (posabs) section <!—- width: 100% of window -—> <section> <!—- width: [?] -—> <div style=”display: grid; position: absolute;”> </div>

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Inline grid hello world section <!—- width: 100% of window -—> <section> <!—- width: as much as content requires -—> <div style=”display: inline-grid;”> hello world

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid conTAiner inLIne

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid conTAiner inLIne Size of containing element WHEN — grid has no explicit width

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid conTAiner bLOck size

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid conTAiner bLOck size Size of containing element WHEN — position:absolute and it has height 100%

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid Tracks

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid Tracks coLUmns / rows

# data[].attributes.slidedeck.data[].slides[].desc.html
Creating columns .grid { display: grid; grid-template-columns: 100px 5cm 10cm 200px 500px 400px 5cm; 100px; 200px; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Creating rows .grid { display: grid; grid-template-columns: grid-template-rows: 100px 5cm400px 200px 10cm 500px 5cm; 200px; 100px; }

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid Tracks: FIXED

# data[].attributes.slidedeck.data[].slides[].desc.html
Fixed sizes .grid { display: grid; grid-template-columns: 5cm 10cm 5cm; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Fixed sizes .grid { display: grid; grid-template-columns: 200px 5cm 10cm 500px 5cm; 100px; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Fixed sizes .grid { display: grid; grid-template-columns: 50em 5cm 10cm 200px 120ch 500px 5cm; 50rem; 100px; }

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Fixed track sizes

# data[].attributes.slidedeck.data[].slides[].desc.html
Fixed track sizes

# data[].attributes.slidedeck.data[].slides[].desc.html
Fixed track sizes

# data[].attributes.slidedeck.data[].slides[].desc.html
Fixed track sizes

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid Tracks: FRACTIONS

# data[].attributes.slidedeck.data[].slides[].desc.html
Fractions This is not auto .grid { display: grid; grid-template-columns: 50em 1fr 10em; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Sizing with fractions

# data[].attributes.slidedeck.data[].slides[].desc.html
Sizing with fractions

# data[].attributes.slidedeck.data[].slides[].desc.html
This default is a feature, usually you don’t want text on top of other text.

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
Sizing with fractions

# data[].attributes.slidedeck.data[].slides[].desc.html
Sizing with fractions

# data[].attributes.slidedeck.data[].slides[].desc.html
One cell in a track can affect the whole track’s size.

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.slidedeck.data[].slides[].desc.html
Fractions .grid { display: grid; grid-template-columns: 50em 1fr 10em; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Fractions .grid { display: grid; grid-template-columns: 50em minmax(0, 1fr) 10em; }

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid Tracks: keywords

# data[].attributes.slidedeck.data[].slides[].desc.html
min-content

# data[].attributes.slidedeck.data[].slides[].desc.html
min-content

# data[].attributes.slidedeck.data[].slides[].desc.html
max-content

# data[].attributes.slidedeck.data[].slides[].desc.html
fit-content(value)

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid Tracks: AUTO

# data[].attributes.slidedeck.data[].slides[].desc.html
Auto track size .grid { display: grid; grid-template-columns: 50em auto 10em; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Auto is what you’ll get if you don’t size your track. (Overridable with grid-auto-rows / grid-auto-columns)

# data[].attributes.slidedeck.data[].slides[].desc.html
Auto track size .grid { display: grid; }

# data[].attributes.slidedeck.data[].slides[].desc.html
Auto track size Maximum track size: of all grid items, pick the one with the largest max-content. This is your track size.

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid tracks

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid tracks Size you specified WHEN — you use fixed sizing units (relative or absolute)

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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.

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid ITEms

# data[].attributes.slidedeck.data[].slides[].desc.html
Grid item size depends on alignment.

# data[].attributes.slidedeck.data[].slides[].desc.html
Alignment is what happens when you have more space than content.

# data[].attributes.slidedeck.data[].slides[].desc.html
Alignment is what happens when you have more space than content.

# data[].attributes.slidedeck.data[].slides[].desc.html
Alignment is what happens when you have more space than content.

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
A grid with five items
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; }

# data[].attributes.slidedeck.data[].slides[].desc.html
A grid with five items
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; }

# data[].attributes.slidedeck.data[].slides[].desc.html
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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
!stretch (start)
<div> <p>The</p> <p>five</p> <p>boxing</p> <p>wizards</p> </div> p { background-color: skyblue; align-self: start; }

# data[].attributes.slidedeck.data[].slides[].desc.html
!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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
!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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
!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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
!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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
!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; }

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid ITEms

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| Grid ITEms Size of track WHEN — item is aligned “stretch”

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| 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

# data[].attributes.slidedeck.data[].slides[].desc.html
|||||||| ConcLUding…

# data[].attributes.slidedeck.data[].slides[].desc.html
Grid Layout helps with more international CSS, by being less physical.

# data[].attributes.slidedeck.data[].slides[].desc.html
Grid Layout helps with more international CSS, by being less physical. For websites, letting the browser decide flexibly, can make your life easier.

# data[].attributes.slidedeck.data[].slides[].desc.html
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/)

# data[].attributes.slidedeck.data[].slides[].desc.html
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!

# data[].attributes.codeblocks.data[].title
Grid item sizes depend on alignment or margin

# data[].attributes.resources.data[].title
“Vertical typesetting with writing-mode revisited”, a post by Hui Jing Chen

# data[].attributes.resources.data[].title
“CSS Writing Modes” , a post by Jen Simmons

# data[].attributes.resources.data[].title
“How big is that box?”, a post by Rachel Andrew