What's the point of naming grid lines?

Hi guys; so here's some code:

<div class="wrapper">
  <div class="item1">Start column line 1, span 3 column tracks.</div>
  <div class="item2">
    Start column line 6, span 4 column tracks. 2 row tracks.
  </div>
  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
  <div class="item4">
    Start at column line 3, span to the end of the grid (-1).
  </div>
</div>

<div class="wrapper">
  <div class="item1">Start column line 1, span 3 column tracks.</div>
  <div class="item2">
    Start column line 6, span 4 column tracks. 2 row tracks.
  </div>
  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
  <div class="item4">
    Start at column line 3, span to the end of the grid (-1).
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

.item1 {
  grid-column: col-start / span 3;
}
.item2 {
  grid-column: col-start 6 / span 4;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}
.item4 {
  grid-column: col-start 3 / -1;
  grid-row: 3;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

.item1 {
  grid-column: col-start / span 3;
}
.item2 {
  grid-column: col-start 6 / span 4;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}
.item4 {
  grid-column: col-start 3 / -1;
  grid-row: 3;
}

5 Replies

son argOP•3y ago

So my question is, whats the point of naming grid lines when I can just use the line number itself? Instead of

.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}

.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}

Why not just omit col-start and do this:

.item3 {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.item3 {
  grid-column: 2 / span 2;
  grid-row: 2;
}

MarkBoots•3y ago

With a repeat, it doesnt make much sense, because all grid lines will get the same name, but when you give each column separate line names, you can assign childs easier (specially with overlapping regions), here a wonderful example (not mine) https://codepen.io/hexagoncircle/pen/dyejrpE

Ryan Mulligan

CodePen

Layout Breakouts with CSS Grid

Demo for the article Layout Breakouts with CSS Grid....

son argOP•3y ago

Thanks!

denertog•3y ago

following up on this. what is the advantage (if there is any) of naming grid lines over using grid-template-areas with named areas?

Kevin Powell•3y ago

Overlapping content, for one. Named areas can't overlap other areas. With line names, you can easily overlap content.

Gaming

Programming

What's the point of naming grid lines?