An Ember Dev's
Guide to
CSS Grid

Grid gives us

• a re­spon­sive CSS-only lay­out method
• that re­quires only grid styles,
• al­lows col­umn/​​row/​​gap con­trol, and
• can put chil­dren at any col­umn/​​row po­si­tion

Grid Properties & Values

Today’s Grid Properties & Values

.site {
  display: grid;
  grid-template-columns: 1fr 40em 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 pro­por­tions for tracks along the in­line axis of the grid con­tainer

Value: a se­ries of valid length val­ues

grid-template-rows

Set the pro­por­tions for tracks along the block axis of the grid con­tainer

Value: a se­ries of valid length val­ues

🚨 Warning: Fixed Heights 🚨

Fixed heights => over­flow

Flexible row height val­ues: auto, min-content, max-content

Logical Properties

Inline: start to end of a line of text in the block

Block: start to end of the block of text

grid-template-areas

• Assign names to grid ar­eas
• White space does­n’t mat­ter
• . cre­ates 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:
    "👱‍♀️ 👱‍♀️ 👱‍♀️ 👱‍♀️"
    ".  📄 📶 . "
    "🦶 🦶 🦶 🦶";
}

grid-template-areas

One rec­tan­gle

Adjacent cells

Strings, not in­te­gers

BONUS! grid-template

Assign rows, columns, and ar­eas

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

gap

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

Grid
Container
Values

fr

One “frac­tion” of the grid’s free space

Calculated af­ter non-fr
space is used

Based on to­tal num­ber of fr
in the row or col­umn

repeat()

Repeats a cer­tain value a spec­i­fied num­ber of times

repeat(<count>, <length>)

repeat(12, 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" auto /
     30%   1fr;
  gap: 1rem 3rem;
}

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

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

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

Tips,
Tricks &
Gotchas

Image Sizes

img as­signed to a grid-area obeys the grid cell size, not its in­trin­sic as­pect ra­tio

Wrap im­ages in a con­tainer el­e­ment

Animating Grids

Some browsers an­i­mate

grid-template-columns

grid-template-rows

gap

Can’t an­i­mate el­e­ments be­tween ar­eas

IE 11

Fallback lay­out CSS (if pos­si­ble)

Autoprefixer can help (if nec­es­sary)

No gap sup­port

Resources

• MDN: Grid, CSS-Tricks, Grid Garden
• Rachel Andrew: Box Alignment, Grid by Example, The New CSS Layout
• Jen Simmons: Layout Land, Web Design Experiments, Grid Layout Examples
• CodePen Grid Collection
• Flexbox Fallbacks for Grid Layouts

James Steinbach

Senior UX Developer
at DockYard

jdsteinbach

Twitter | Github | Blog