CODEWITHSUNDEEP
htmlcsscss-grid
user3402743
user3402743

Reputation: 593

CSS Grid row that expands in height only when necessary?

I'm trying to create a CSS grid with two rows. I want the row on the bottom to be fixed to 47px tall. That's easy enough. It's the top row that is giving me trouble.

I want the top row of my CSS grid to be a minimum of 250px tall, even if there is no content in the row. But if content is in there, I want the row to expand its height up to a maximum of 303px tall. That is to say, I want the row's height to grow only if the content makes that necessary.

From what I've seen with things like grid-template-rows: minmax(250px, 303px), is that it will expand to 303px if there is enough room for it to do so.

Even if there is enough room, I don't want it to expand unless it has to - that is to say, it only expands because there's content that is taller than 250px.

I have a simple grid like this:

<div class="myGrid">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>

With CSS like this:

.myGrid {
    display: grid;
    max-height: 350px;
    grid-template-rows: minmax(250px, 303px) 47px;
    grid-template-columns: 1fr 2.5fr;
    grid-template-areas: "a b" "c c";
}

.left {
    grid-area: a;
}

.right {
    grid-area: b;
}

.bottom {
    grid-area: c;
}

With this code, the top row is always 303px, presumably because there's enough room to expand to that height. But I only want it to expand to that height if its content makes that necessary.

Upvotes: 5

Views: 1631

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372194

Instead of controlling the minimum and maximum heights of the row at the grid container level, control them at the grid item level.

.myGrid {
  display: grid;
  max-height: 350px;
  grid-template-rows: auto 47px;
  grid-template-columns: 1fr 2.5fr;
  grid-template-areas: "a b" "c c";
}

.left {
  min-height: 250px;
  max-height: 303px;
  grid-area: a;
  background-color: aqua;
}

.right {
  min-height: 250px;
  max-height: 303px;
  grid-area: b;
  background-color: lightgreen;
}

.bottom {
  grid-area: c;
  background-color: orangered;
}

body {
  margin: 0;
}
<div class="myGrid">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>

jsFiddle demo

Upvotes: 1

Vinayak Bagaria
Vinayak Bagaria

Reputation: 162

A hack can be to set the max-height on either .left or .right, and overflow as hidden like:

.myGrid {
    display: grid;
    max-height: 350px;
    max-width: 700px;
    grid-template-rows: minmax(250px, max-content) 47px;
    grid-template-columns: 33% 67%;
    grid-template-areas: "a b" "c c";
}

.left {
    max-height: 303px;
    overflow: hidden;
    grid-area: a;
}

.right {
    grid-area: b;
}

.bottom {
    grid-area: c;
}

Upvotes: 0

Related Questions