CODEWITHSUNDEEP
csscss-grid
Djave
Djave

Reputation: 9329

Nested grids result in rows automatically filling the largest size

I have a grid that works great:

.grid {
  display: grid;
  height: 100vh;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
}

.card {
  border: 2px solid #000;
}
<div class="grid">
  <div class="card">Lots and lots and lots of text...</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

In this example, I have the page divided into 4, with all divs the same size. As the text gets longer in the first card, it expands, pushing the other cards down (making them smaller) before ultimately pushing them off the page, increasing the height of the div.

https://codepen.io/EightArmsHQ/pen/641b47d9bbc7a13880a53b0da04bd3bb

If I wrap this another div

.wrap {
  height: 100vh;
  display: grid;
  grid-template-rows: 20vh 1fr;
}

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
}

.card {
  border: 2px solid #000;
}
<div class="wrap">
  <div class="controls">
    <h1>Text here.</h1>
  </div>
  <div class="grid">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

Then the .grid rows all match each others height. Which is cool, but not what I want in this scenario. How can I make them behave similarly to the previous example?

Incorrect behaviour:

https://codepen.io/EightArmsHQ/pen/5637d435b48628aa5f31d5b996bbc6bf

Upvotes: 0

Views: 75

Answers (1)

Terminator-Barbapapa
Terminator-Barbapapa

Reputation: 3126

The 1fr in grid-template-rows: 20vh 1fr; makes the second grid take up the rest of the available space after your controls div. That space then gets equally divided in four quarters by the CSS settings of your second grid:

grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;

Simply remove the grid-template-rows style from your second grid so the grid row height is set to auto.

.wrap{
  height: 100vh;
  display: grid;
  grid-template-rows: 20vh 1fr;
}
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
}
.card{
  border: 2px solid #000;
}

Upvotes: 1

Related Questions