Kevin Powell - CommunityKP-C
Kevin Powell - Community•9mo ago•
6 replies
aaron

Can't reason how to span grid item?

Hello everyone.
I am new to CSS grid.

Given this code

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div class="span-item">D</div>
  <div>E</div>
</div>

.container {
  display: grid;
  grid: auto-flow / repeat(2, 1fr);
  background-color: #ccc;
  padding: 8px;
  border-radius: 4px;
  gap: 4px;

  > * {
    outline: 1px solid #f00;
  }

  > .span-item {
    grid-column-start: 2;
    grid-row: 2 / span 2;
    

    // grid-row-start: span 2; // work
    // grid-row: span 2; // work

  }
}

I want the grid item which contains D to expand for 2 rows and position at column 2.
I can get it work but can't reason why setting grid-row: 2 / span 2 needs grid-column-start: 2 unless it will be moved to column 1.

Setting only grid-row-start: span 2, grid-row-end: span 2 or grid-row: span 2 works without setting grid-column-start: 2 ,

It would be glad if someone help me figure it out or if there is the reference/document for this behavior.

Here is the codepen :
https://codepen.io/aaronamm/pen/bNNzXqM?editors=1100

Thank you so much.
CodePenAaron
grid-row-span
...
grid-row-span
Was this page helpful?