How can I collapse a row (remove a row) which doesn't have content in an explicitly declared CSS grid layout?

Question

The question is similar to How do you collapse unused row in a CSS grid? but my rows are explicitly declared.

I have a CSS grid similar to below design:

But whenever I have no content/limited content, I'm getting some unwanted rows there. How can I remove those rows as it's adding unwanted space in my design?

I think I can't use grid-auto-rows or anything because I wanted that layout, for which I need to define the rows as in my CSS.

ref: how my layout looks when there's not enough content.

Please check the codepen:

With content: https://codepen.io/asim-coder/pen/JwJzWx
Without content: https://codepen.io/asim-coder/pen/mawomJ

.card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr 2fr;
  grid-gap: 5px;
}
.card * {
  /*   styles for demonstational purposes */
  background: #02750b;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.card :nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
}
.card :nth-child(5) {
  grid-area: 3 / 2 / 5 / 3;
}
.card :nth-child(4) {
  grid-area: 2/ 1 / 4/ 2;
}
.card :nth-child(6) {
  grid-area: 2/ 3 / 4/ 4;
}

p  {
  padding: 5px;
  background: #b5b53f;
}

<div class="card">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<p>Some thing after the content</p>

Michael Benjamin · Accepted Answer · 2018-12-26T23:33:34.530

You're defining the rows at the container level.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr 2fr;
  grid-gap: 5px;
}

But content is handled at the grid item level.

Therefore, when the container is asked to layout explicit tracks, it does the job without regard for the existence of content.

In your case, when content appears or disappears, there is no change to the container rules, so there is no reason for rows to disappear.

But I don't see any reason for explicit rows to make this layout work. Just take them out.

Note that fr units distribute free space in the container. But you haven't set a height on the container, which means there is no free space to distribute. This may lead to unexpected behavior across major browsers (depending on how they chose to render such a scenario). Try setting a height on the container for more proper and stable behavior.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-rows: 2fr 1fr 1fr 2fr; */
  grid-gap: 5px;
}
.card * {
  /*   styles for demonstational purposes */
  background: #02750b;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.card :nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
}
.card :nth-child(5) {
  grid-area: 3 / 2 / 5 / 3;
}
.card :nth-child(4) {
  grid-area: 2/ 1 / 4/ 2;
}
.card :nth-child(6) {
  grid-area: 2/ 3 / 4/ 4;
}

p  {
  padding: 5px;
  background: #b5b53f;
}

<div class="card">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<p>Keep in mind you're using <i>fr</i> units in a container with no defined height. So expect free space to be distributed unevenly across examples.</p>


<div class="card">
  <div>1</div>
  <div>2</div>
  <div>3</div>
 </div>
<p>less space = smaller <i>fr</i> units = potentially shorter grid areas (browser behavior may vary)</p>

Thanks. I thought for using the grid-area I need rows also. Never thought about removing the rows and trying. — Asim K T, Dec 27 '18 at 04:47
I've one more doubt. Like you said `fr` will give me some unexpected errors. But is there simple way to place columns other than manually calculating and putting some thing like `grid-template-columns: repeat(3, 33.33%);` something like fr but something which won't care about the content width/height? — Asim K T, Dec 27 '18 at 04:49
Instead of `1fr` (takes content into account) use `minmax(0, 1fr)` (ignores content). https://stackoverflow.com/q/52861086/3597276 — Michael Benjamin, Dec 27 '18 at 05:10
great, It's working. https://codepen.io/asim-coder/pen/xmLRjP I thought it won't. Because we're saying here that min will be 0 but max can be 1fr of free space. That's like same as giving `1fr`, right? — Asim K T, Dec 27 '18 at 05:17
like, if I give an explicit width, fr will be calculated based on the space remaining, right? — Asim K T, Dec 27 '18 at 05:18

How can I collapse a row (remove a row) which doesn't have content in an explicitly declared CSS grid layout?

1 Answers1