0

Is it possible to either

  • make an item occupy all of a single column in grid layout, when not knowing how many rows there are (depending on the number of items) or

  • make all other items occupy only a selected range of columns, but still each single item occupying a single grid cell only, not items spanning multiple columns?

What I show below is the first case I described, but it works only when the number of rows is known beforehand. Replacing 1 / 6 with 1 / -1 doesn't work.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.grid div {
  background: red;
}

.left {
  grid-row: 1 / 6;
}
<div class="grid">
  <div class="left">Column</div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
</div>
fweth
  • 631
  • 6
  • 16
  • Does this answer your question? [Items that span all columns/rows using CSS grid layout](https://stackoverflow.com/questions/42239778/items-that-span-all-columns-rows-using-css-grid-layout) – Schulze Oct 05 '22 at 08:17

1 Answers1

0

As this post, you should use grid-row-start

.grid {
  display: grid;
  grid-template-columns:  [first-col] 35% repeat(2, minmax(10rem, 1fr)); 
  grid-template-rows: auto [last-line];
}

.grid div {
  background: red;
  margin:0.5rem;
}

.left {
  grid-column: first-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}
<div class="grid">
  <div class="left">Column</div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>J</div>
  <div>J</div>
</div>
rrr63
  • 219
  • 9