« resources

Web Directions

Layouts

Distributing content, and providing structure

workshops.oddbird.net/wd24/layout/

Cmd/Ctr-K for Controls

CSS takes a source document organized as a tree of elements… and text nodes… and renders it onto a canvas such as your screen.

— CSS Display Module Level 4
Earth seen through a window on the international space station
Two-Dimensional Viewport [Physical Dimensions]

Elements Generate Boxes

Diagram of the CSS box model, an inner content area surrounded by padding, a border, and margin – each area is labeled with arrows showing the space covered
Box Model Areas
Diagram of the CSS box model, with arrows to each box-edge: from an inner content-box edge around the content area, then (working out) a padding-box edge around the padding area, a border-box edge, and a margin-box edge
Box Model Edges

display is a Shorthand

primarily inside and outside modes

Inner display creates Formatting Context

  • Flow (can be multi-column)
  • Grid
  • Flex
  • Table
We’ll come back to these…

Outer display creates Normal Flow Behavior

  • Inline
  • Block
only relevant in normal flow!
Inline/Block Intrinsic Sizing [present, debug]

Inline boxes… Get inline-size from Content

Intrinsic – look to children…

Block boxes… Get block-size from Content

Intrinsic – look to children…
Intrinsic Sizing [present, debug]

display property Box Generation Values

  • None
  • Contents
  • List-Item
Flow (boxes) [present, debug]

display: contents ⚠️ Potentially Severe A11y Issues

Especially avoid… ❌ On Buttons & Tables

These boxes Have a Flow

Text lines use inline axis [demo link]
Inline axis depends on writing mode [demo link]
Inline flow depends on language direction [demo link]
Blocks of text stack… [demo link]
[Physical Dimensions]
[Logical Dimensions]
Logical (flow-relative) Sides [present, debug]

flow-relative Logical Properties

CSS logical properties and values on MDN
  • width -> inline-size
  • height -> block-size
  • top -> block-start
  • bottom -> block-end
  • left -> inline-start
  • right -> inline-end
e.g margin-right -> margin-inline-end
Logical properties [present, debug]
Block & Inline Shorthands [present, debug]
css…
input {
  margin-inline-end: 1em;
  margin-left: 0;
}
Cascade Separately
Alignment in absolute position [present, debug]

Place Self

Block axis comes first

Shorthand for… Align-Self & Justify-Self

Which axis are we manipulating?

Fill space With stretch

Set position start | center | end

Set position self-* | flex-*

  • Rarely, we might have nested writing modes
  • (Different on container and items)
  • We can change which one we’re aligning based on
  • With self-start & self-end (for items own writing mode)
  • Or flex-start & flex-end (for the flex direction)
Safe & Unsafe Alignment [present, debug]

Details differ Across Layout Contexts

See CSS Box Alignment

Layout modes… Flow, Flex, Grid, Table-*…

block ➡️ block flow
inline ➡️ inline flow \

grid ➡️ block grid
flex ➡️ block flex
table ➡️ block table

Margin collapse & float overflow [present, debug]

Display: Flow-Root

Create a Block Formatting Context

Understanding CSS Layout And The Block Formatting Context
Floats and the BFC [present, debug]
A BFC preventing wrapping of floats. [present, debug]
BFC Margin Collapsing [present, debug]

Display Flow-Root

See details on the Web Features explorer

display: flex Content Sharing Space

or inline-flex

Beyond intrinsic & extrinsic… Flexible Sizing

css…
.defaults {
  flex-basis: auto; /* starting width */
  flex-shrink: 1; /* distribution factor */
  flex-grow: 0; /* distribution factor */
}
Flex Items…

Four flex Shorthand Values

initial | auto | none | <grow>

shorthand values designed to handle the majority of use-cases

Initial Shrink, If Necessary

Same as 0 1 auto

Auto Shrink or Grow

Same as 1 1 auto

None Don’t Flex

Same as 0 0 auto

<number> Share Space Equally

Same as <number> 1 0
The Flex highlighter, Flex Container pane, and Flex Item pane in Firefox developer tools
Firefox Flexbox Inspector
Flexbox is inline-ish [present, debug]
  • initial
  • auto
  • none
  • <grow>
screenshot
[teacupgorilla.com]
  • Flex values can add up to less than one!

place-self to Move Individual Items

Explicit on each element

place-items to Move All Items

A default from the container

place-content to Move Entire Layout

Content distribution space-between | -around | -evenly

Flexbox alignment [present, debug]

Generally… I Avoid Flex-Basis

Not a strict rule, just a hint!

You probably Want Grid Instead

Poll… Do You Use CSS Grid?

IM(H)O… The Best of CSS 🏆

display: grid Container Defined Layout

Grid Terminology [present, debug]
Implicit Grids [present, debug]

Implicit grids

Generate columns & rows as needed

Sizing implicit tracks… grid-auto-columns
grid-auto-rows

Explicit item placement… grid-column & grid-row

Shorthand for grid-<axis>-start & grid-<axis>-end
Overlapping content in grids [present, debug]

Defining Templates grid-template-columns
grid-template-rows

Defining Templates grid-template: <rows> / <columns>;

Explicit Grids [present, debug]
  • grid-template often the right shorthand

Defining Templates grid-template: <rows> / <columns>;

Fluid & Fixed 20em 25% 200px

Fluid Until Fixed minmax(min-content, 1fr)

Fitted… fit-content(<limit>)

clamp(auto, max-content, <limit>)

Repeating… repeat(<count>, <tracks>)

Understanding 1fr [present, debug]

Essential Use Cases

  1. Auto-fit for cards & galleries
  2. Named areas for layout
  3. Named lines for prose
  4. Overlapping layouts
Auto-fit & auto-fill [present, debug]
Auto-Fit Grid [present, debug]
  1. Auto-fit for cards & galleries

  2. Named areas for layout

  3. Named lines for prose
  4. Overlapping layouts
Explicit Grids [present, debug]
Variations on a media-object [present, debug]
  1. Auto-fit for cards & galleries
  2. Named areas for layout

  3. Named lines for prose

  4. Overlapping layouts
Named grid lines [present, debug]

Names ↔ Areas

with matching *-start & *-end names
  1. Auto-fit for cards & galleries
  2. Named areas for layout
  3. Named lines for prose

  4. Overlapping layouts

  • We can use the interaction between named lines and named areas
  • To create more interesting and overlapped layouts
Overlapping Named Lines [present, debug]

Subgrid

as column or row template

Subgrid

See details on the Web Features explorer
Baseline 2023 Newly available
Subgrid Forms [present, debug]
Stages of Squishiness [present, debug]
Understanding 1fr [present, debug]

🤔 Nested Contexts ??

Content Expands & Contracts ??
Media vs Container [live code, present, debug]
Statue of The Thinker with a scribbled thought bubble asking: do containers know stuff? photo: Avery Evans

Container queries will never be possible on the web. They would cause infinite layout loops.

— Browsers, a paraphrase (circa 2020)
The pink box is now labeled extrinsic size (imposed from outside), and the oveflowing blue text now has a dashed box and says intrinsic size (from the content)
The intrinsic/extrinsic diagram with red circles and arrows and question-marks scribbled all over it

Container Queries

See details on the Web Features explorer
Media vs Container (Live Demo) [present, debug]
« resources

Web Directions

Layouts

Bring this workshop to your company.
Slide Controls

View:

Navigate slides using the arrow-keys.