CODEWITHSUNDEEP
htmlcsscss-grid
Kevin Lewis
Kevin Lewis

Reputation: 25

Can you control grid row sizes when a large item spans multiple rows?

I have a div that is set to display: grid and this grid has three columns. In the first column, I have a large item that spans two rows. Right now, because that item is bigger than everything else, the two rows it spans are set to equal height. I want the first row to fit to content and the second row to fill the rest of the space (sort of like a flex-grow: 1 but for grids). How would I go about doing this?

<style>
  .container {
    display: grid;
  }
  .large__item {
    grid-row: 1 / 3;
    height: 100px;
  }
  .item__one {
    grid-column: 2;
    grid-row: 1
  }
  .item__two {
    grid-column: 2;
    grid-row: 2
  }
</style>

<div class="container">
  <!--Height is actually unknown-->
  <div class="large__item"></div>
  <!--Should fit to content-->
  <div class="item__one">Content</div>
  <!--Should fill rest of space-->
  <div class="item__two">Fill</div>
</div>

Upvotes: 1

Views: 54

Answers (1)

Miloš Miljković
Miloš Miljković

Reputation: 497

You should define the sizes of the rows in the grid-template-rows rule like this grid-template-rows: max-content auto, this will create two rows, the first one will be the height of the content and the second one will auto to the height of the larger element that spans over the two rows.

.container {
  display: grid;
  grid-template-rows: max-content auto;
  background-color: red;
}

.large-item {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-color: gray;
}

.item-one {
  grid-column: 2;
  grid-row: 1;
  background-color: blue;
}

.item-two {
  grid-column: 2;
  grid-row: 2;
  background-color: yellow;
}
<div class="container">
 <div class="large-item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at</div>
 <div class="item-one">Content</div>
 <div class="item-two">repellat?</div>

</div>

Upvotes: 2

Related Questions