Estelle Weyl | @estellevw | Github | Press to advance, 2 for comments, 4 to read/write notes.

Grids

Flexbox

Grid

Grid

Grid

Terminology

Grid lines
The vertical and horizontal lines that divide the grid and separate the columns and rows. Start counting at 1, not 0.
Grid cell
A single child or unit of a CSS grid.
Grid area
Any rectangular space surrounded by four grid lines. Can contain any number of grid cells.
Grid track
The space between two grid lines. This space can be horizontal or vertical: a grid row or grid column
Grid row
A horizontal grid track.
Grid column
A vertical grid track.
Gutter
Space between two rows and two columns.

Is it ready?

Properties Seen

On the parent

display:
grid-template-columns: 
grid-gap:

On the child

grid-columns:
grid-row: 

New values

repeat()
fr

Setting up the Grid

Properties declared on the parent

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template (shorthand)
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

display:

display: inline | block | list-item | inline-list-item | inline-block | flex | inline-flex| grid | inline-grid | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents | none | flow | flow-root

Display

Display

Columns and Rows

Defines the columns and rows of the grid with a space-separated list of values representing the track size

grid-template-columns: none | <track-list> | <auto-track-list>
grid-template-rows: none | <track-list> | <auto-track-list>
  • <track-list> = <line-name>? [ <track-size> | <track-repeat> ]
  • <track-size> - can be a length, a percentage, or a fraction of the free space (fr) in the grid
  • <line-name> - ident or string
grid-template-columns: 200px 1fr max-content minmax(min-content, 1fr);

grid-template-columns & rows

grid-template-columns: 
  150px 150px 150px;
  repeat(3, 150px);
  275px repeat(2, 150px);
  100px repeat(2, 1fr) 2fr;
grid-template-rows: 
  150px 150px 150px;
  repeat(3, 150px);
  275px repeat(2, 150px);
  100px 1fr 2fr;

Mix units!!!
That's the power of grid! Or,at least one of the powers.

Naming Grid Lines

You can name grid lines:

grid-template-columns: 
  [start] 150px 150px 150px [end];
  • You can name none, some or all of the lines
  • To name, put brackets around the ident

Rows & Columns: Try it out

fr and repeat()

fr
Fraction Unit
describes a fraction of the available space

repeat()
repeat notation:
repeat(# of repeats, length)

Values

length or percentage
% are relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If size of container depends on the size of its tracks, the % is treated as auto.
flex: fr
Positive fr value specifying the track’s flex factor. Each fr'ed track takes a share of the remaining space in proportion to its flex factor.
max-content
Equal to the largest of the max-contents in the grid track.
min-content
Equal to the largest of the min-contents in the grid track.
minmax(min, max)
A size between min and less. If max < min, then max is ignored and minmax(min,max) is treated as min.
auto
As a maximum, identical to max-content. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.
fit-content(length or percent)
Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.

Adding gutters

Gutter size: global spacing between grid items with:

grid-column-gap
vertical space between columns
grid-row-gap
horizontal space between rows
grid-gap
Shorthand for grid-row-gap and grid-column-gap, in that order. Can take one or two lengths or percents.

Only a single size for each axis.

    grid-column-gap: 20px;
    grid-row-gap: 1em;
    grid-gap: 1em 20px;

Margin works! Feature or bug?

Gutters: Try it out

Grid Steps: Try it out ➹

  1. Create grid container with the display property
  2. Optional: Create columns and rows with either:
    1. grid-template-columns, and
    2. grid-template-rows
    or
  3. Optional: add a gutter with grid gap or grid-column-gap and grid-row-gap
Try it out ➹

Placement

Positioning Grid Items

Understanding Grid Lines

1234
1234

item positioning properties

.myItem {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 5;
  }
  .myItem {
    grid-row: 2 / 4;
    grid-column: 2 / 5;
  }
.myItem {
    grid-area: 2 / 2 / 4 / 5;
  }

Placing an item

The grid-area shorthand

grid-area: a / b / c / d
grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area: a / b / c;
grid-column-end was omitted
d = named grid-column-start || auto
grid-area: a / b; 
grid-row-end and grid-column-end omitted
c = named grid-row-start || auto
d = named grid-column-start || auto
grid-area: a;
Only grid-row-start is declared
if grid-row-start is named, all four longhands are set to that value. Otherwise, set to auto

Grid Item Properties

grid-column-start
grid-column-end
grid-column

grid-row-start
grid-row-end
grid-row

grid-area
justify-self
align-self

Placing an item again

Holy Grail Layout

Try it out! ➹

Try it out ➹

Template Areas

Our magic layout:

body {
  grid-template-areas:
      "header header header"
      "nav article aside"
      "footer footer footer";
}
header {
  grid-area: header;
}
nav {
  grid-area: nav;
}
article {
  grid-area: article;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;

Paste the code

Alignment

Alignment

Container Properties

justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

Item properties

justify-self
align-self

Row alignment: justify-items property

justify-items: 
  normal | stretch | baseline | start |  end | center | flex-end | 
  flex-start | legacy | safe | unsafe | left | right | 
  center | self-end | self-start | start | stretch | unset

Aligns items in the inline direction (horizontal)

justify-items: normal | stretch | 
   <baseline-position> | [ <overflow-position>? <self-position> ] |
  [ legacy || [ left | right | center ] ]
<baseline-position> = baseline | first baseline (start) | last baseline (end)
<overflow-position>? <self-position> = [safe | unsafe]? [right | center | left |
   start | flex-start | flex-end | end | self-start]
aligning all the content within each cell

justify-items

New terms

<overflow-position> = unsafe | safe

safe
If it overflows the alignment container, it aligns as if the alignment mode were start.

unsafe
No matter the relative sizes overflowing, the alignment value is honored.

legacy || left | center | right

legacy
Value inherits into descendants. Computes to inherit (if declared) or normal (if defaulting) if left | center | right not present.

Column alignment: align-items property

Aligns items in the block direction (vertical)

align-items: 
  baseline | center | 
  end | flex-end | flex-start | left |  
  normal | right | safe | self-end | self-start | 
  start | stretch | unsafe 
  • aligns content of all the grid cells to the content within each cell
  • individual grid cell content alignment can be overwritten with align-self and justify-self.

align-items

Do both: place-items property

place-items: <align-items>  <justify-items
  • shorthand for align-items and justify items
  • Order matters! align items is first.
  • If only one value is declared, will be applied to both.

place-items

Aligning the Grid

Defines how the items are aligned with respect to the grid if the size of all the items combined is not the same size as the container.

justify-content: baseline | center | end | flex-end | flex-start | 
   left | normal | right | space-around | space-between | space-evenly | start | 
   stretch | safe | unsafe
align-content: baseline | center | end | flex-end | flex-start | 
  left | normal | right | space-between | space-evenly | start | 
  stretch | safe | unsafe

Tip: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties

justify & align content

justify-content

align-content

Implicit track sizing

When items are placed outside of the tracks defined by grid-template-rows, grid-template-columns, and grid-template-areas, implicit grid tracks by added. These properties size those tracks

grid-auto-columns: 
grid-auto-rows:
grid-auto-flow:

automatic flow

White Space

Background & Borders

Next ➹

Links