« resources

Smashing Workshop

Grids & Layout

imposing structure on the page

workshops.oddbird.net/smashing24/grid/

Cmd/Ctr-K for Controls

Flex follow-up… CodePen & Layers

A shipping yard from above, with rows of colorful stacked shipping containers photo: CHUTTERSNAP
Statue of The Thinker with a scribbled thought bubble asking: do containers know stuff? photo: Avery Evans
Media vs Container [live code, 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
Support data from CanIUse.com on the css-container-queries feature
[Can I Use]
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).

— me

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

— me

👍🏼 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

  1. For each matched element…
  2. 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;
}
Simplest Solution…

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) { … }
Style Queries

Always Queries Direct Parent

Unless you query a specific container-name

No containment required
Style query button themes [present, debug]
Support data from CanIUse.com on the css-container-queries-style feature
[Can I Use]

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 [present, debug]
css…
/* explicit fallbacks, rarely needed */
@supports not (container: name) { /* … */ }
Progressive Enhancement…

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…
Headshot of Jen Simmons, smiling

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
  • … 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]
Site wireframe drawn over a wide 12-column 'grid'
  • Can we still make static grids,
  • With 12 equal-width columns? Yes.
  • Is that the best we can do?
12 equal columns, scribbled out
  • No

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]
« resources

Smashing Workshop

Grids & Layout

Bring this workshop to your company.
Slide Controls

View:

Navigate slides using the arrow-keys.

Color Settings