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

Grids

estelle.github.io/CSS/grid

Grids

  • Overview/intro
  • Terminology
  • Browser Support
  • Property overview
  • display property
  • grid-template-columns
  • grid-template-rows
  • Naming Grid Lines
  • fr and repeat()
  • Grid gutters
  • Placing items in a grid
  • Grid Lines
  • item positioning properties
  • Grid Item Properties
  • Placing an item again
  • Named grid areas
  • Alignment
  • Row alignment
  • Column alignment
  • justify-content
  • align-content
  • Implicit grids
  • White Space
  • minmax( min, max ) function
  • Intrinsic Sizing
  • Developer Tools

estelle.github.io/CSS/grid

Flexbox

Grid

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 or Gap
Space between two rows and two columns.

Terminology

Is it ready?

Properties Seen

On the parent

display:
grid-template-columns: 
grid-template-areas:
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 ( gap )
place-items      ( justify-items | align-items )
place-content   (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: inline-grid;

Declaring display: grid gives you a one column grid

All the children converted to grid items

Display

Display

Columns and Rows

Explicit grids: grid-template-columns & grid-template-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> - An ident or string
grid-template-columns: 200px 1fr max-content minmax(min-content, 1fr);

Grid

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

Implicit grids

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

Automatic flow

automatic flow

White Space

minmax( min, max ) function

Defines a size range greater than or equal to min and less than or equal to max.

minmax( <size> , <size> )

where <size> is:

<length> | <percentage> | <flex> | min-content | max-content | auto 

Used by:

grid-template-columns: minmax(min-content, 200px) minmax(300px, 1fr) 250px;  
grid-template-rows:
grid-auto-columns: minmax( 100px , 1fr );
grid-auto-rows: minmax( 3em , max-content );

min-max() function

Intrinsic Size function

min-content
When text is wrapped as small as possible, softwrapping but not breaking any words, in the inline direction, without overflow. Usually the longest word or link, or largest image.
max-content
Size with no wrapping, even if an overflow is caused.

min-max() function (again)

fr and repeat()

fr
Fraction Unit
describes a fraction of the available* space

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

*The fr unit distributes available space, not all space. If a tracks has a large link or image, there's' less distributable space.

auto-fill value

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

Global (only one value per direction) spacing between grid items:

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.
gap
Not yet fully supported replacement for grid-gap used in grid, flex, columns.

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

Margin works! Feature or bug?

Gutters: Try it out

Margins

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

Line based placement

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

Solution ➹

Named grid layout

grid-template-areas and grid-area

Specifies named grid areas.

grid-template-areas: "a b b"
   "a c d";
article {
  grid-area: b;
}

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;
}

Create your named layout

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

Developer Tools

Transforms

Next ➹

Links