Make Grid Items Sparing Out Single Column

October 5, 2022

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?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

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>

>Solution :

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>