css-grid.md

CSS Grid

On Tuesday, CSS Grid will be live in all modern browsers

Terminology

• Container: An element that contains a grid (display: grid)
• Items: Direct descendants of the container
• Line: Your grid lines, numbered starting with 1 (NOT 0)
• Cell: Like a table cell, between 4 lines
• Area: Any area defined between 4 lines
• Track: Either a row or a column
• Grid Gap: The empty gutter between rows or columns

How to

1. Define a grid
2. Place items in the grid
3. World peace

2 types of placement models: automatic and manual
Automatic will start at the top and place content into the cells

display: grid
Defines a grid, no rows or columns

grid-template-columns: 2fr 1fr 1fr;
Takes a list of lengths denoting distance between grid lines.
fr is fraction of the space.

grid-template-rows: auto 1fr 3fr;
Draws grid rows.
auto takes up the height/width of the content, but affects other fractions.

Use grid-column/grid-row to manually place elements.

grid-column: 2/4; finds columns 2 and 4 and places the item between those lines.

Can also span multiple rows/columns: grid-row: span 2

You can stack things on top of each other.

Complex grid layouts become awkward, but you can give grid lines names.

You can also name grid areas: grid-template-areas.
It's like ASCII art for your grid.

grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
    "title title title"
    "main header header"
    "main sidebar footer";

Elements use the grid-area property: grid-area: title;

Now you can use media queries to change the layout of areas: Just change grid-template-areas in a media query.

You also can have nested grids. Make a grid item display: grid.

You should use grid whenever you have 2-dimensional layouts.

Responsive Grids

New CSS function repeat(count, value): grid-template-colums: repeat(6, 10em);

New CSS function in grid markup: minimax(..., ...)

minmax(5em, 10em) never be smaller than 5em, never wider than 10em

The grid container is actually a flexible box: Everything you know about flexbox applies to grid as well.
justify-content works just like flexbox: center, space-between, space-around

Two magic properties in the repeat() function:

• auto-fit
• auto-fill

Essentially, you get a grid that wraps

auto-fill creates the columns, but leaves them empty.
auto-fit puts in as many columns as fit, and leaves the rest of the space empty (so you can use justify-content).

Browser Support

All modern browsers, including IE10, IE11, and Edge (but an older spec)
Edge will support spec-compliant grid on Tuesday

display: grid falls back to display: block

You can use feature queries with @supports (display: grid) (but IE10 will accept this)

This means the site will not look the same in all browsers (particularly older ones)
Responsive Web Design in the domain of time instead of width

How to approach it today

1. Build accessible mobile-first layout without grid
2. Use that layout as fallback for all browsers/devices
3. Then use @supports to detect grid support
4. Create an appropriate breakpoint and introduce grid

• Firefox Dev Edition has a Grid Inspector
• https://gridbyexample.com/
• MDN has exhaustive documentation about everything
• CSS-Tricks has a Complete Guide to CSS Grid
• Grid Playground: https://codepen.io/mor10/pen/MEQJbM