« resources

OddBird Workshops

Grids & Alignment

workshops.oddbird.net/layout25/grid/

Cmd/Ctr-K for Controls

Poll… Do You Use CSS Grid?

  • ✅ regularly
  • ⚠️ sometimes
  • ❌ rarely

IM(H)O… The Best of CSS 🏆

  • Flexbox and grid are both excellent
  • I use them all the time, for different things
  • But grid may be my favorite tool in CSS
screenshot
[2010 Responsive Web Design by Ethan Marcotte ]
  • Ethan Marcotte coined the term RWD in 2010
  • He didn’t invent the idea, but he named it
  • And documented the approach,
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
  • Which is a lot of work to get right,
  • We have to remove all intrinsic sizing
  • And then careful math to replace all lengths with percentages
  • Everything is explicit, and fluid, and heavy on the math
  • Watch out for sub-pixel rounding!
Site wireframe drawn over a
wide 12-column 'grid'
  • After all that work
  • We get something like 12 equal columns
  • with alignment on a single axis
  • explicit breakpoints,
  • and no intrinsic sizing.

2017… CSS Grid

  • But then CSS Grid lands in 2017
  • Flexbox has already been available for several years
  • And it’s time to rethink
  • Not the goals of Responsive Design
  • But a modern approach…
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
Everything You Know About Web Design Just Changed
  • With truly two-dimensional layouts
  • In nested contexts
  • (we don’t have to choose between flow, flex, and grid)
  • (we can mix and match as needed)
  • Combining fluid and fixed and flexible units
  • That expand and contract at different stages
  • (rather than explicit breakpoints)
  • And the whole system can use intrinsic sizing,
  • Not always relying on explicit percentages and media queries
  • This is really a new era of web layout
  • With so much potential!
  • Jen Simmons coins a new term for this evolution
  • Intrinsic Web Design
Site wireframe drawn over a
wide 12-column 'grid'
  • Can we still make static grids,
  • With equal-width columns?
  • Yes…
css…
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1em;
  • With a couple lines of code, and no math.
  • But…
screenshot
[labs.jensimmons.com]
  • We can do so much more than that
Grid Terminology [present, debug]
  • But first, let’s understand what a grid is
  • Grid ‘lines’ create column and row ‘tracks’
  • With ‘cells’ between, which can combine into ‘areas’
  • Note that ‘the grid’ lives between the container & the items
  • A grid can overflow the container
  • Items can overflow their grid areas
  • We get full flexibility with alignment of content/items on either axis
Implicit Grids (live) [present, debug]
  • Grid is designed for layout
  • And has a block-like default (display: grid)
  • By default we get an implicit grid
  • Each item takes one cell
  • New rows are auto-generated as needed
  • Everything is ‘auto’ sized (like block elements)
  • We get new columns if we start placing things in them
  • Container controls the gap
  • Item margins are contained

Implicit grids Generate Tracks As Needed

  • An implicit grid generates tracks as needed
  • By default they’re in a single column
  • Generating new rows for each element

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

Explicit item placement grid-column-start / -end

  • We can explicitly place elements
  • By establishing the start or end

Explicit item placement grid-column or grid-row

<start> / <end>

For both axis… grid-area

  • grid-row / grid-column
  • row-start / col-start / row-end / col-end
Overlapping content in grids [present, debug]
  • We can start using implicit grids immediately
  • For use-cases like overlapping content (demo)
  • We can also start playing with alignment
  • (center on the page)
css…
* { box-sizing: border-box; }
html { block-size: 100%; }
body { min-block-size: 100%; }
Stretch document to cover viewport
  • This is the snippet I recommend
  • For setting the document root and body height
  • to match the viewport height
  • More flexible than using viewport units
  • And still allows the content to overflow
  • Gives us a good basis for exploring…

Box Alignment

distributing extra space

  • Box alignment
  • Proposed/implemented along side flexbox, also works in grid
  • Often considered ‘part of’ these layout methods
  • But that was never the intent
  • The spec also describes how it should work in
  • ‘block’ and ‘absolute positioned’ layouts
  • And now browsers are starting to add that support!
Implicit Grids (live) [present, debug]
  • But let’s go back to our basic grid demo
  • (inspect grid) add ‘fill’ snippet to document
  • place-content (block then inline)
  • We’re moving the entire grid, the entire content
  • stretch, center, start, end
  • space-between, -around, -evenly
  • separate align-content & justify-content
  • place-items and place-self

place-content to Move Entire Layout

Shorthand for… Align-Content & Justify-Content

Which axis are we manipulating?

  • We can target each axis individually
  • justify-* props apply to the ‘inline’ axis
  • (Think about justifying paragraphs)
  • align-* props apply to the ‘block’ axis
  • (Think about aligning text and icons)

Fill space With stretch

Set position start | center | end

  • We can position our grid on either axis
  • To the start, center, or end
  • Based on the writing mode of the container

space-between
space-around
space-evenly

  • Or distribute the space
  • Between grid-tracks

place-self to Move Individual Items

Explicit on each element

  • We can individually move items
  • inside each grid cell
  • using place-self

place-items to Move All Items

A default from the container

  • Or establish a default placement
  • for all items
  • Using place-items

align-content & justify-content
align-items & justify-items
align-self & justify-self

  • Again, these are shorthand for align & justify
  • But it can be hard to remember the terms
  • Alignment is the block axis, like vertical-align
  • Justification is inline, like justified text
  • I use this shorthand all the time, it’s easier
  • Block first, then inline
Safe & Unsafe Alignment [present, debug]
  • Sometimes alignment can move overflow to scroll start
  • Dangerous, because we can’t scroll before the start
  • safe ‘clamps’ alignment at the start
  • Don’t want to lose content

Details differ Across Layout Contexts

See CSS Box Alignment
  • From here, alignment details differ a bit
  • Depending on the layout mode
  • We’ll get to that,
  • But let’s put it all together…
Explicit Grids [present, debug]
  • Start by doing it implicit
  • We can take the same HTML from earlier
  • And let’s add some explicit track sizes
  • With grid, can coordinate it all from the container
  • (Even when using intrinsic sizes)
  • That helps us change the layout in one place

Implicit & explicit Are Not Exclusive

  • These concepts are not exclusive,
  • Implicit and explicit tracks can be combined…

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

  • We can define a grid template on either axis,
  • Column or row tracks…

grid-template: <rows> / <columns>

  • Or on both at the same time,
  • But that template is just the starting point
  • Browsers will still add implicit column & row tracks as needed

Mix & Match 20em 25% 200px 1fr

  • Tracks can use any mix of different units
  • Fluid or fixed,
  • relative or absolute

Truly Fluid 1fr 20%

  • For years we’ve referred to ‘%’ as fluid
  • Because they change with the viewport
  • But at any given screen size,
  • percentages are absolute values!
  • Grid fraction units remain fluid
  • Adapting not just to the viewport
  • But also to surrounding content
Understanding 1fr [present, debug]

Fluid Until Fixed minmax(12em, 1fr)

  • And then we get functions like minmax,
  • allowing us to combine fluid and fixed values
  • for different amounts of squishiness
Stages of Squishiness [present, debug]

Fitted… fit-content(<limit>)

Similar to clamp(auto, max-content, <limit>)
  • Fit content allows us to grow a track
  • Until we reach either
  • The limit we provide
  • Or the max size of the contents
  • We never grow farther than necessary

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

  • We can repeat tracks

repeat(2, 200px 1fr)

  • And repeat multiples of tracks
  • This repeats twice,
  • But includes two tracks
  • So the result of the repetition is 4 tracks

Don’t get Lost in Syntax

  • Those are the basic concepts
  • And there’s so much we can do
  • People sometimes get lost in the all the options
  • Don’t let that happen!
  • If you feel overwhelmed with all the syntax…

Essential Use Cases

  1. Auto-fit for cards & galleries
  2. Named areas for layout
  3. Named lines for prose
  4. Overlapping layouts
  5. SubGrids vs Nested Grids
  • I’d recommend picking one one these common use-cases
  • Whatever will help you most,
  • And start working that into your projects
  • Let’s go through them

auto-fit or -fill, Replacing Media Queries

  • We already saw a basic repeating grid
  • By making it repeat a specific number of times
  • But CSS can do some of that work for us,
  • So that we don’t need media queries as often
Auto-fit & auto-fill [present, debug]

demo:

  • replace media with auto fit & fill
  • fixed width vs minmax(<min>, 1fr)
  • more flexible small-screen <min> to avoid overflow
  • jump from 1 to 3 columns
Auto-Fit Grid [present, debug]
  • Stacy has a great demo taking this even farther
  • To create a masonry-like image gallery
  1. Auto-fit for cards & galleries
  2. Named areas for layout

  3. Named lines for prose
  4. Overlapping layouts
  5. SubGrids vs Nested Grids
  • We also created a basic four-part layout
  • When we were talking about explicit grids
  • But we can improve on that with named grid areas!
Explicit Grids [present, debug]

demo:

  • name the areas
  • assign items to areas
  • change columns at breakpoint
Variations on a media-object [present, debug]
  • We can also adjust the template on the fly
  • Using selectors or variables
  1. Auto-fit for cards & galleries
  2. Named areas for layout
  3. Named lines for prose

  4. Overlapping layouts
  5. SubGrids vs Nested Grids
  • It’s not just areas,
  • We can also name individual grid lines
Named grid lines [present, debug]
  • We can start with names
  • Or we can start with areas

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

  5. SubGrids vs Nested Grids
  • We can use the interaction between named lines and named areas
  • To create more interesting and overlapped layouts
Overlapping Named Lines [present, debug]
  • We don’t need lines everywhere elements have edges
  • But everywhere they relate to
  1. Auto-fit for cards & galleries
  2. Named areas for layout
  3. Named lines for prose
  4. Overlapping layouts
  5. SubGrids vs Nested Grids

Subgrid Forms [present, debug]
  • We can inherit a grid
  • …if all the tracks are extrinsic
  • …or we don’t need alignment
  • subgrid aligns across grids

Subgrid

as column or row template

  • Subgrid is just a keyword
  • Used for explicit columns or rows
  • That’s the entire feature

SubGrid

See details on the Web Features explorer
  • Baseline, but recent
  • Fallback to inherit!
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
Everything You Know About Web Design Just Changed
  • Grid isn’t flashy,
  • We’ve always had hacks and workarounds
  • That get us a usable layout
  • But learning grid has been the biggest time-saver
  • in my 20 year CSS career
  • And opened up the most possibilities
  • for really intrinsic and expressive layouts

If you learn one thing… Learn Grids

  • If you only learn one thing in this workshop
  • Learn grids
« resources

OddBird Workshops

Grids & Alignment

Bring this workshop to your company.
Slide Controls

View:

Navigate slides using the arrow-keys.