Search code examples
csscss-grid

How to reason an implicit css grid area without all 4 edges named?

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.

Solution

  • 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?