A Practical Introduction
to CSS Grid

A Brief History
of Layout
on the Web

1. Tables (HTML)
   Pros

   • It worked back then
   Cons

   • It's a table
   • Not responsive
   • Edit = rewrite markup
2. Inline-Block
   Pros

   • Not a table
   • Precise widths
   Cons

   • Each column needed CSS width
   • Complicated math
   • White space created tiny gaps
   • Hack: HTML changes or font-size: 0
3. Float
   Pros

   • Not a table
   • Precise widths
   Cons

   • Each column needed CSS width
   • Complicated math
   • Parent height collapsed
   • Hack: clearfixes
4. Tables (CSS)
   Pros

   • Not an HTML table
   Cons

   • Needs more complicated markup (row elements)
   • Can’t mix fluid and fixed easily
5. CSS Columns
   Pros

   • Not a table
   • Precise widths
   • Supports gaps & dividers
   Cons

   • Inner content breaks across columns
   • Browser bugginess
6. Flexbox
   Pros

   • Not a table
   • Precise widths
   • Flexible columns sizing
   Cons

   • Each column needed CSS width / flex-basis
   • No gaps
   • Only 1-dimension (columns or rows)

Wishlist

• CSS: responds to media queries (not markup)
• Intentional: no float, font-size, white-space “hacks”
• Precision: mix fluid & fixed sizes
• 2D: both rows & columns

CSS GRID FTW

Grid gives us

• a responsive CSS-only layout method
• that requires only grid styles,
• allows column/row/gap control, and
• can put children at any column/row position

Grid Properties & Values

Today’s Grid Properties & Values

Grid
The Bare
Minimum

.site {
  display: grid;
  grid-template-columns:
    1fr minmax(65%, 40em)
      minmax(35%, 20em) 1fr;
  grid-template-areas:
    "header header  header  header"
    "  .    content sidebar    .  "
    "footer footer  footer  footer";
  gap: 12px 16px;
}

.site__header {
  grid-area: header;
}
.site__main {
  grid-area: content;
}
.site__aside {
  grid-area: sidebar;
}
.site__footer {
  grid-area: footer;
}

Grid
Container
Properties

grid-template-columns

Set the proportions for tracks along the inline axis of the grid container

Value: a series of valid length values

• 1fr 50em 35em 1fr
• 30% 150px 30%

grid-template-rows

Set the proportions for tracks along the block axis of the grid container

Value: a series of valid length values

• 1fr 2fr
• 50px repeat(10, 100px)

grid-template-areas

• Assign names to grid areas
• White space doesn’t matter
• . creates a “blank” area

grid-template-areas

.grid {
  grid-template-areas:
    "header header header  header"
    "   .   body   sidebar   .  "
    "footer footer footer  footer";
}

grid-template-areas

.grid {
  grid-template-areas:
    "👱‍♀️   👱‍♀️"
    "📄   📶"
    "🦶   🦶";
}

BONUS! grid-template

Assign rows, columns, and areas

.grid {
  grid-template:
    "header header"  auto
    "body   sidebar" auto
    "footer footer"  auto /
     40em   20em;
}

gap

• Creates gaps between columns and rows
• Formerly called grid-gap
• Shorthand: row-gap column-gap
• gap: 20px 30px

Grid
Container
Values

fr

One “fraction” of the grid’s free space

Calculated after non-fr space is used

Based on total number of fr in the row or column

300px 1fr

1fr 50em 25em 1fr

1fr 2fr 3fr

repeat()

Repeats a certain value a specified number of times

repeat(<count>, <length>)

repeat(12, 1fr)

minmax()

Finds a value between two lengths

minmax(<min>, <max>)

minmax(10px, 1fr)

Grid
Child
Properties

grid-area

Values:

• A grid-template-areas name
• Shorthand for
  row-start / column-start / row-end / column-end

Congrats! You know
Grid!

Practical
Grid
Examples

.row {
  display: grid;
  grid-template:
    "title   date"   auto
    "actions status" auto /
     1fr     max-content;
  gap: .5rem;
}

.employee {
  display: grid;
  grid-template:
    "photo header" auto
    "photo awards" auto
    "bio   awards" 1fr /
     30%   1fr;
  gap: 1rem 3rem;
}

.employee {
  display: grid;
  grid-template:
    "photo  header" auto
    "bio    bio"    auto
    "awards awards" 1fr /
     150px  1fr;
    gap: 1rem;
}

.employee {
  grid-template:
    "photo" auto
    "header" 1fr /
     1fr;
  gap: 1rem;
}

.employee__awards,
.employee__bio {
  display: none;
}

.image-grid {
  grid-template:
    " i1  i1  i2  i3" 1fr
    " i1  i1  i4  i3" 1fr
    " i6  i7  i4  i5" 1fr
    " i6  i8  i8  i9" 1fr /
     1fr 1fr 1fr 1fr;
  gap: 10px;
}

.image-grid {
  grid-template:
    "i35 i36 i37 i38 i39 i40 i41" 1fr
    "i34 i13 i14 i15 i16 i17 i18" 1fr
    "i33 i12  i1  i1  i1  i2 i19" 1fr
    "i32 i11  i1  i1  i1  i3 i20" 1fr
    "i31 i10  i1  i1  i1  i4 i21" 1fr
    "i30  i9  i8  i7  i6  i5 i22" 1fr
    "i29 i28 i27 i26 i25 i24 i23" 1fr /
     1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}

Tips,
Tricks &
Gotchas

Named Grid Areas

One rectangle

Adjacent cells

Strings, not integers

Image Sizes

img assigned to a grid-area obeys the grid cell size, not its intrinsic aspect ratio

Wrap images in a container element

Fixed Heights

Fixed heights => overflow

Flexible row height values: auto, min-content, max-content

Animating Grids

Some browsers animate

grid-template-columns

grid-template-rows

gap

Can’t animate elements between areas

Grid vs Flexbox

Grid controls 2 dimensions

Grid allows more precise sizing

Grid has gap

IE 11

Fallback layout CSS (if possible)

Autoprefixer can help (if necessary)

No gap support

Resources

• MDN: Grid
• CSS-Tricks
• Rachel Andrew: Box Alignment, Grid by Example, The New CSS Layout
• Game: Grid Garden
• CodePen Grid Collection
• Flexbox Fallbacks for Grid Layouts

Thanks, Y’all! 👍

James Steinbach

Senior UX Developer
at DockYard

jdsteinbach

Twitter | Github | Blog