1

Here is a situation I met and I didn't expect that the grid area will span the whole row track.

As you can see, only col-start defined in the layout. How come the whole row track turned into an implicit grid area named as col?

Here is the code.

HTML:

<div class="wrapper">
  <div class="content">content</div>
</div>

CSS:

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

.content {
    grid-area: col;
}

enter image description here

.content div crosses all 12 column tracks.

krave
  • 1,629
  • 4
  • 17
  • 36

1 Answers1

2

From my understanding, you have defined all the grid lines to have the same name col-start but you never defined any grid lines called col-end and the trick is here.

When using grid-area: col we need to either have an area called col or grid lines called col-start and col-end. We don't have any named area and we only have col-start so the browser will implicitly create a grid line called col-end to place your element and this will result in 13 columns in total and not 12

Here is an example where I am reducing the number of column to better see

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, [col-start] 1fr);
  grid-auto-columns: 100px;
  gap: 10px;
  border: 1px solid;
}

.content {
  grid-area: col;
}
<div class="wrapper">
  <div class="content">content</div>
</div>

enter image description here

Note how we have 5 explicit columns sized with 1fr and an extra implicit column sized with 100px. This extra column is the result of the implicit grid line called col-end that the browser need to create to place your element.

When you define many grid lines with the same name, only the first one will be considered. I still need to find the explanation of this part in the Spec but the demo we have validate this. The element is placed between the first grid line until the extra implicit one.

Related question with a similar situation: Why does a grid-area name absent in grid-template-areas create additional tracks?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thank you for the explanation. It also clears my confusion about why the line with number 14 present on the debug tool. The anwser you referred to also helps to make everything making sense to me. `grid-area: col` asks browser to find `grid-column-start: col-start` and `grid-column-start: col-end` for placement. We have many lines with the same name which is `col-start` so the first one becomes the target. Given `col-end` is not available in the explicit grid, implicit grid to the rescue. `grid-column-end: col-end 1` points to the first line in the implicit grid! :) – krave Aug 05 '22 at 12:37