KPC
Kevin Powell - Community•2w ago
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>
<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.
Aaron
CodePen
grid-row-span
...
3 Replies
Chris Bolson
Chris Bolson•2w ago
I don't fully understand the reason but I think that it has to do with the way that the algorithm attempts to place elements that have a explicit grid position defined. These take priority over items that don't have an explicit position. As item D is the only one to which you have assigned a grid position, it is being priotorized over the rest of the items. Items A and B can take their natural positions as you have explicitly defined row 2 for item D so they are unaffected. As item C does not have an explicit grid position defined, it has lower "priority" than item D so it gets moved to the next available space once the explicit positioning of D has been fulfilled. I am not sure if that is what is exactly what is happening but I am fairly sure that it is along those lines. You might get a better understand if you wade through the auto placement algorithm documentation.
aaron
aaronOP•2w ago
Thank you so much. I am so impressed for your prompt reply. I think what you explained about priority makes sense a lot. If we convert 
> .span-item { 
grid-row: 2 / span 2
> .span-item { 
> .span-item { 
grid-row: 2 / span 2
> .span-item {
to 
> .span-item { 
    grid-row-start: 2;
    grid-row-end: span 2;
  }
> .span-item { 
    grid-row-start: 2;
    grid-row-end: span 2;
  }
. The item D will be moved to the column 1. Then we change CSS rule to 
 > .span-item {
   grid-row-end: span 2; 
  }
 > .span-item {
   grid-row-end: span 2; 
  }
or 
 > .span-item {
   grid-row-start: span 2; 
  }
 > .span-item {
   grid-row-start: span 2; 
  }
which causes item D to not have higher priority than item C. Item D stays on column 2. @Chris Bolson thank you so much, you have maded my day.
Chris Bolson
Chris Bolson•2w ago
👍 Glad to have been able to help.

Did you find this page helpful?