#todayilearned

by @jm3 · aka John Manoogian3

Frequent, bite-size mini-milestone updates as I fast-forward merge* my front-end web development skills up to 2019 levels. Learn more

Save time with CSS grid area start/end shortcuts

Posted at — Jun 14, 2019

grid-column & grid-row both support a shorthand “slash” syntax where the first value represents the column or row start and the second value represents the column or row end. This is more concise than explicitly listing start and end positions, but not so terse as the four-way a/b/c/d syntax, which is harder to orient around.

.a {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

From Rachel Andrew’s now very outdated (as of 2019) book, Getting Ready for CSS Grid Layout.