aaron Posts - Answer Overflow

aaron

•Created by aaron on 5/15/2025 in #help

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>

<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

  }
}

.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.

7 replies

Gaming

Programming