Grids & Alignment

• Flexbox and grid are both excellent
• I use them all the time, for different things
• But grid may be my favorite tool in CSS

• Ethan Marcotte coined the term RWD in 2010
• He didn’t invent the idea, but he named it
• And documented the approach,

• 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!

• After all that work
• We get something like 12 equal columns
• with alignment on a single axis
• explicit breakpoints,
• and no intrinsic sizing.

• 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…

• 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

• Can we still make static grids,
• With equal-width columns?
• Yes…

• With a couple lines of code, and no math.
• But…

• We can do so much more than that

• 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

• 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

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

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

• 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)

• 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
• 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!

• 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

• 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)

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

• Or distribute the space
• Between grid-tracks

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

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

• 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

• 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

• From here, alignment details differ a bit
• Depending on the layout mode
• We’ll get to that,
• But let’s put it all together…

• 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

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

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

• 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

• 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 the all the options
• Don’t let that happen!
• If you feel overwhelmed with all the syntax…

• 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

• 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

• 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!

demo:

• name the areas
• assign items to areas
• change columns at breakpoint

• We can also adjust the template on the fly
• Using selectors or variables

• 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

• 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!

• 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 only learn one thing in this workshop
• Learn grids