February 26, 2024

Smashing Workshop

Grids & Layout

workshops.oddbird.net/smashing24/grid/

Arrows navigate, cmd/ctrl-k for settings

Flex follow-up… CodePen & Layers

A shipping yard from above,
with rows of colorful stacked shipping containers

Statue of The Thinker
with a scribbled thought bubble asking:
do containers know stuff?

Media vs Container: live, present, debug

Normal Flow: present, debug

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)

😎 Fing Cool Feature

(but makes CQs impossible)

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

— Browsers, a paraphrase (circa 2020)

The intrinsic/extrinsic diagram
with red circles and arrows and question-marks
scribbled all over it

Media vs Container (Live Demo): present, debug

The thinker
with a red scribbled thought bubble:
how?!

*Some Restrictions Apply

We can’t impact The Container That We Query

Directly or indirectly

We Need to Turn Off Intrinsic Sizing

The intrinsic/extrinsic diagram
with the intrinsic content sizing
scribbled out

CSS Containment

contain: size | layout | style | paint;

Avoid internal impacts on external elements…

CSS is Rad: present, debug

Block boxes get their inline-size from Context (extrinsic).

— Miriam Suzanne

Block boxes get their block-size from Content (intrinsic).

— Miriam Suzanne

👍🏼 Inline-Only Containment

Ancestor Layout Loops with Single-Axis Containment

👎🏼 Block-Only Containment

We can only Measure The Axis We Contain

Contain `inline-size` For Most Containers

Contain `size` For Scroll Containers

Containing Size: present, debug

Also need to Contain Layout & Style

Understanding containment: present, debug

Since… Containment is Invasive

We create Explicit Containers

css

container-type: inline-size;

contain: inline-size layout style;

Recommended… Name Your Containers

css

main {
  container: layout main / inline-size;
}

container-name [/ container-type]?

css

@container layout (min-width: 40em) {
  .conditional { /* … */ }
}

@container main (min-width: 40em) {
  .conditional { /* … */ }
}

Finding Containers

For each matched element…
Find the nearest ancestor that has…
- Any required container name
- Any required container types

Containers Can’t Self-Query

(That would introduce loops!)

Always Measuring an Ancestor

(can’t change what you measure!)

Enter the 36 Chambers: present, debug

Always Measuring an Element

Bonus! Container Queries Measure Actual Styles

Computed values on the container element

Size queries, relative/var units: present, debug

Grid Tracks & Flex Sizing?

No element to measure…

Three mud turtles
on a small log
surrounded by water.

Flexbox cards, with Container Queries: present, debug

Container Query Bookstore: present, debug

Container Query Blinds v2: present, debug

For legacy reasons… No Default Containers

(we shouldn’t rely on body style propagation)

css

body > :is(header, main, footer, aside) {
  container: layout / inline-size;
}

also… Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

Default unit container The Small Viewport

On an example phone,
the large viewport fills the full screen
with all browser chrome hidden -
the small viewport fills the remaining space
when top and bottom browser chrome are visible — The Large, Small, and Dynamic Viewports by **Bramus Van Damme**

cat in a box, thinking
'OMG I have so many questions for this damn box' — Photo by Sahand Babali on Unsplash

css

@container style(--colors: invert) { … }

Always Queries Direct Parent

Unless you query a specific container-name

No containment required

Style query button themes: present, debug

Style Queries… Only Custom Properties*

* for now **
** but maybe forever?

State Queries (???)

CSSWG issue for state queries

css

@container state(stuck) { … }
@container state(snapped) { … }
@container state(overflowing) { … }

Chrome Explainer [Sticky Header State Query!: present, debug]

css

/* explicit fallbacks, rarely needed */
@supports not (container: name) { /* … */ }

There’s a Polyfill

GoogleChromeLabs/container-query-polyfill

Poll… Do You Use CSS Grid?

✅ regularly
⚠️ sometimes
❌ rarely

Goal… Go Grid First

I have an agenda
When you do layout
You should reach for grids first
So let’s skip this background stuff…

2010… Responsive Web Design™

Original List Apart Responsive Web Design article by Ethan Marcotte

skip…

scss

.grid-span {
  width: percentage( /* 23.7288136% */
    ((3 * 4em) + (2 * 1em)) / ((12 * 4em) + (11 * 1em))
  );
  margin-right: percentage( /* 01.6949153% */
    1em / ((12 * 4em) + (11 * 1em))
  );
  padding-left: percentage( /* 08.4745763% */
    ((1 * 4em) + (1 * 1em)) / ((12 * 4em) + (11 * 1em))
  );
}

Watch out for sub-pixel rounding

skip…

Site wireframe drawn over a
narrow 4-column 'grid'

skip…

Site wireframe drawn over a
mid-width 8-column 'grid'

skip…

Site wireframe drawn over a
wide 12-column 'grid'

skip…

Problems… Single Axis

skip…

Problems… Complex Math

skip…

Problems… No Intrinsic Sizing

skip…

2012… Flexible Boxes

skip…

Great for Distributing space

skip…

Not great for Explicit Layout

skip…

Designed to Pair With CSS Grid

oops, five years later…

skip…

2017… CSS Grid

skip…

Jen Simmons… Intrinsic Web Design

Truly Two-Dimensional Layouts
Nested Contexts
Combine Fluid & Fixed
Various Stages of Squishiness
Content Expands & Contracts
Media Queries*, As Needed

* And now Container Queries [Jen Simmons]

… And get right to the good stuff
We’re in a new era of web layout
(read the slide)

A quick bit of grid: present, debug

Can we still make static grids,
With 12 equal-width columns? Yes.
Is that the best we can do?

Container… display: grid

Implicit Grids: present, debug

Grid Terminology: present, debug

Implicit grids

Generate columns & rows as needed

Auto item placement… grid-auto-flow

column | column [+ dense]

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

Explicit item placement… grid-column & grid-row

Shorthand for grid-<axis>-start & grid-<axis>-end

Explicit span… grid-column: span `<tracks>`

Either start or end can be a span

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

Explicit Grids: present, debug

Fluid & Fixed 20em 25% 200px

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

Fitted… `fit-content(``<limit>``)`

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

Understanding 1fr: present, debug

Stages of Squishiness: present, debug

Variations on a media-object: present, debug

Named grid lines: present, debug

Names ↔ Areas

with matching *-start & *-end names

Overlapping Named Lines: present, debug

Media/container Queries, As Needed

Repeating Grids

repeat( <count>, <tracks> )

Revisit Gwen: present, debug

Auto-Fit Grid: present, debug

Subgrid

as column or row template

Subgrid Cards: present, debug

Subgrid Forms: present, debug

Grid & Variable Temperatures: present, debug

Next module… Naming & Organizing Conventions

« back to resources

Flex follow-up… CodePen & Layers

😎 Fing Cool Feature

*Some Restrictions Apply

We can’t impact The Container That We Query

We Need to Turn Off Intrinsic Sizing

CSS Containment

👍🏼 Inline-Only Containment

👎🏼 Block-Only Containment

We can only Measure The Axis We Contain

Contain inline-size For Most Containers

Contain size For Scroll Containers

Also need to Contain Layout & Style

Since… Containment is Invasive

We create Explicit Containers

Recommended… Name Your Containers

Finding Containers

Containers Can’t Self-Query

Always Measuring an Ancestor

Always Measuring an Element

Bonus! Container Queries Measure Actual Styles

Grid Tracks & Flex Sizing?

For legacy reasons… No Default Containers

also… Container Query Units

Default unit container The Small Viewport

Always Queries Direct Parent

Style Queries… Only Custom Properties*

State Queries (???)

There’s a Polyfill

Poll… Do You Use CSS Grid?

Goal… Go Grid First

2010… Responsive Web Design**™**

Problems… Single Axis

Problems… Complex Math

Problems… No Intrinsic Sizing

2012… Flexible Boxes

Great for Distributing space

Not great for Explicit Layout

Designed to Pair With CSS Grid

2017… CSS Grid

Jen Simmons… Intrinsic Web Design

Container… display: grid

Implicit grids

Auto item placement… grid-auto-flow

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

Explicit item placement… grid-column & grid-row

Explicit span… grid-column: span <tracks>

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

Fluid & Fixed 20em 25% 200px

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

Fitted… fit-content(<limit>)

Names ↔ Areas

Media/container Queries, As Needed

Repeating Grids

Subgrid

Next module… Naming & Organizing Conventions

Color Settings

Contain `inline-size` For Most Containers

Contain `size` For Scroll Containers

2010… Responsive Web Design™

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

Explicit span… grid-column: span `<tracks>`

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

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

Fitted… `fit-content(``<limit>``)`