Make CSS grid rows heights to take maximum of their content

Question

How to make css grid rows height expanding to take the maximum depending on their content?

So this would transform:

Into:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  outline: 2px dashed red;
}

.panel-grid {
  background-color: #f0f0f0;
  outline: 1px solid blue;
  display: grid;
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
    <div class="panel-grid">
      <div class="row"><div>1</div><div>1</div><div>1</div></div>
      <div class="row2"><div>2</div></div>
      <div class="row3"><div>3</div></div>
    </div>
    <div class="panel-grid">
      <div class="row"><div>1</div></div>
      <div class="row2"><div>2</div><div>2</div><div>2</div></div>
      <div class="row3"><div>3</div></div>
    </div>
    <div class="panel-grid">
      <div class="row"><div>1</div></div>
      <div class="row2"><div>2</div></div>
      <div class="row3"><div>3</div></div>
    </div>
</div>

Michael Benjamin · Answer 1 · 2020-04-16T18:00:59.240

I don't think this will be possible until browsers support display: contents or display: subgrid.

In the meanwhile, I think the closest you can get (without altering the HTML) is equal height rows across containers. The heights are set by the tallest item in each row.

Add this to your code:

.panel-grid {
   display: grid;
   grid-auto-rows: 1fr; /* new */
}

This overrides the grid-auto-rows: auto default.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  outline: 2px dashed red;
}

.panel-grid {
  background-color: #f0f0f0;
  outline: 1px solid blue;
  display: grid;
  grid-auto-rows: 1fr; /* new */
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="panel-grid">
    <div class="row">
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div class="row2">
      <div>2</div>
    </div>
    <div class="row3">
      <div>3</div>
    </div>
  </div>
  <div class="panel-grid">
    <div class="row">
      <div>1</div>
    </div>
    <div class="row2">
      <div>2</div>
      <div>2</div>
      <div>2</div>
    </div>
    <div class="row3">
      <div>3</div>
    </div>
  </div>
  <div class="panel-grid">
    <div class="row">
      <div>1</div>
    </div>
    <div class="row2">
      <div>2</div>
    </div>
    <div class="row3">
      <div>3</div>
    </div>
  </div>
</div>

If you can change the HTML–putting all items in a single container– then here's a possible option:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto); /* new */
  grid-auto-flow: column; /* new */
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-gap: 5px;
  outline: 2px dashed red;
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid">
  <div class="row">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row2">
    <div>2</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
</div>

More details:

score 0 · Answer 2 · answered Apr 16 '20 at 17:58

If you are able to modify your HTML and re-order your rows (as in the demo code below), you should be able to accomplish something similar by using a container with grid-auto-flow:row - like this:

.container {
  align-items: stretch;
  grid-auto-flow: row;
}

See demo below:

.container {
  align-items: stretch;
  grid-auto-flow: row;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 9fr);
  grid-column-gap: 20px;
  outline: 2px dashed red;
}

.panel-grid {
  background-color: #f0f0f0;
  outline: 1px solid blue;
  display: grid;
}

.row {
  background-color: #5879c5;
  text-align: center;
  font-weight: bold;
}

.row2 {
  background-color: #c5b07f;
  text-align: center;
  font-weight: bold;
}

.row3 {
  background-color: #e0ffef;
  text-align: center;
  font-weight: bold;
}

<div class="grid container">
  <!-- row 1 -->
  <div class="row">
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>
  <div class="row">
    <div>1</div>
  </div>

  <!-- row 2 -->
  <div class="row2">
    <div>2</div>
  </div>
  <div class="row2">
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div class="row2">
    <div>2</div>
  </div>

  <!-- row 3 -->
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
  <div class="row3">
    <div>3</div>
  </div>
</div>

that seems good, thnx. but is there any way to highlight (add an overlay with shadow) to say visual column #2? That was the reason behind `panel-grid`, it's kinda grouping rows and allows me to add nice overlay behind each column. — alex.mironov, Apr 16 '20 at 20:38

Make CSS grid rows heights to take maximum of their content

2 Answers2