Grids & Alignment

Flexbox and grid are both excellent, and I use them all the time, for different things. But grid may be one of my favorite tools in CSS.

People often say that grid is for ‘2D’ layouts, and that’s kinda true –

Flex items flow in a single axis, and optionally wrap at the edge of the page – almost like inline elements. Flexbox has some cool features, but it only helps us line things up on one axis.

But a grid has columns and rows, so we can line things up horizontally and vertically. Look at those little boxes in neat columns and rows.

It’s a real distinction, but I think it misses a deeper point. We don’t need items lining up for grid to be the better option. I use single-track grids all the time, sometimes even single-cell grids!

In my perspective, grid is simply for layout. If you need a layout, then grid is usually the best option.

I mean this in the sense that – take ‘flow’ for example – it’s a model that we use to lay out content, right? There’s a document-like layout that results from using flow. But it’s not for creating layouts in the way we normally use that word.

The same is true, in my mind, for flexbox. Grid is the only tool that has a concept of ‘the layout’ apart from individual elements on the page.

Let’s start with the default result of applying display: grid on an element.

• Very similar to block layout
• Compare to ‘inline’ flexbox default
• Span multiple columns, they appear
• This is the implicit grid, created as needed
• Inspect to see grid structure

The grid itself has a structure.

• Rows & columns are called ‘tracks’
• Overlap creates ‘cells’
• Cells can combine into overlapping rectangle ‘areas’
• Grid ‘lines’ between tracks are indexed & reverse-indexed

And that grid is real, it exists as a distinct construct with a size of its own. The parent element tries to expand so that it contains the tracks we define – and the tracks try to expand to contain grid items. But we can size all three levels independently!

• Items can be smaller/larger than the grid area
• The grid can be smaller/larger than the container
• Percentages are relative to grid areas
• The ‘layout’ lives between parent & children

This has a lot of implications. We can put multiple things in the same part of the grid, and they all take up space!

• If we want items to overlap, we don’t have to remove them from the flow.
• We can align on both axes

This is not what people think of when we say two-dimensional layout, but that’s what we’re doing here. It’s not just about items lining up. We can create any invisible structure we want, and align our items on both axes within that structure.

This is what I mean when I say that grid layout is the only layout that has an actual layout.

Or if you want it stuck in your head forever…

We’ll talk about flexbox more tomorrow.

Box alignment is a feature of its own, with a consistent syntax across layout modes. Browsers are even starting to allow alignment properties in flow layout, and absolute positioned elements. But grid is the only layout mode that can use every sort of alignment available. And again, that’s because the grid itself is a real structure that we can push around and relate to.

Let’s go back to the grid demo, and give it a full-height body element. For now 100% height is our best option, but we have to remove margins. In the future, we want the stretch keyword, and then margins don’t matter.

• place-content moves the grid
• stretch, center, start, end
• space-between, -around, -evenly
• separate align-content & justify-content
• place-items and place-self

Sometimes alignment can cause us to overflow the scroll start – which is dangerous, because we’re not allowed to scroll back past the start. The safe keyword ‘clamps’ our alignment at any unsafe edge, so we don’t lose access to content

Let’s get more explicit. This is the same markup as before, but with a bit more content in place. Last time we left the grid implicit, and pushed elements around – but it’s a bit more concise if we describe the layout all in one place!

I’ll use named areas anywhere I know the names of different areas. Say I have a media object, and I know it will have an image and content. Great, name those areas. If I want different variations, I don’t have to think through the combination of flexbox properties that will get me there – I just draw the different grids I want.

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

• 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

• And then we get functions like minmax,
• allowing us to combine fluid and fixed values
• for different amounts of squishiness

• 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

• We can repeat tracks

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

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

• I’d recommend picking one of these common use-cases
• Whatever will help you most,
• And start working that into your projects
• Let’s go through them

• It’s not just areas,
• We can also name individual grid lines

• We can start with names
• Or we can start with areas

• We can use the interaction between named lines and named areas
• To create more interesting and overlapped layouts

• We don’t need lines everywhere elements have edges
• But everywhere they relate to
• Subgrid is useful here!

• We can inherit a grid
• …if all the tracks are extrinsic
• …or we don’t need alignment
• subgrid aligns across grids

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

• Baseline, but recent
• Fallback to inherit!

• 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

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

• Stacy has a great demo taking this even farther
• To create a masonry-like image gallery

This is why Jen Simmons coined the term intrinsic web design for the new era that grid makes possible.

Learning grid has been the biggest time-saver in my 20-some year web career, and it opens up so many possibilities that are nearly impossible even with flexbox.

If you learn one new feature in this workshop, learn grid.