98

I have two grids nested within a grid. Unfortunately the right nested grid .grid-3 sets the height of the rows so that both the left and right grid are the same height, the extra space is shared among the divs with the class .right. How can I set the rows of the right nested grid to adjust to the size of the content, so they are the same height as the left nested rows?

div {
  border: 1px dotted black;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}
<div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

Improve this question
0

4 Answers 4

Reset to default
119

Use grid-auto-rows: max-content

div {
  border: 1px dotted black;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: max-content;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: max-content;
}

.left {
  background-color: red;
}

.right {
  background-color: green;
}
<div class="grid-2">
  <div class="grid-2">
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
  </div>
  <div class="grid-3">
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
  </div>
</div>

Improve this answer
1
  • 3
    Note that grid-3 will take all parent height here. If you want grid-3's height to fit content you can use my answer.
    – Vadim Ovchinnikov
    Commented Apr 8, 2018 at 11:22
71

By default grid items stretch to all grid cell area. So you have this options here if you want grid's height to fit content:

  • Set alignment for all items using align-items for grid container (default value is align-items: stretch). So just set align-items: start for grid-2. Demo:

    div {
  border: 1px dotted black;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}
    <div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

  • Set alignment for grid items individually using align-self (default value is align-self: stretch). So just set align-self: start for grid-3. Demo:

    div {
  border: 1px dotted black;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-self: start;
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}
    <div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

  • Set alignment for grid items individually using margin property with auto values. Auto margins for grid cell take all available space in any direction. So just set margin-bottom: auto for grid-3. Demo:

    div {
  border: 1px dotted black;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: auto;
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}
    <div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

If you want right grid to take all parent vertical space but make its cells to fit content use align-items: start from this answer. Demo:

div {
  border: 1px dotted black;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-content: start;
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}
<div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

Improve this answer
3
  • The solutions you proposed are good but then another problem arises: there is an extra space created by the margin which is not filled with content. How can I say to the grid system that I just need elements in columns? Maybe I should use flex here... Thanks
    – LucioB
    Commented Sep 18, 2019 at 9:00
  • @LucioB Sorry, didn't understand your question. Maybe it's better to ask a separate question with all details and examples and post the link here to me in comments.
    – Vadim Ovchinnikov
    Commented Sep 18, 2019 at 9:13
  • Based on what I'm seeing, LucioB is saying that with align-items: start, the bottom of the grid content ends where the content ends not where the grid cell ends, so then the next row below it has an extra size gap.
    – agm1984
    Commented Dec 11, 2020 at 5:42
11

You can also try grid-auto-rows: fit-content(1em);. Of course, use whatever sizing makes sense for you. I also tried the approach described by Temani (minmax(min-content, max-content)) and the results were identical when rendering my HTML.

According to Elad Schechter - Medium,

The fit-content function accepts one param, the maximum value. ... The fit-content() function is similar to using the minmax() function, with a minimum value of 0. One key difference: The minmax() is more likely to occupy the max space allowed, while the fit-content does not occupy any more space than necessary.

Your needs will determine whether fit-content is more appropriate than using minmax and vice-versa.

Improve this answer
1

You need to use align-content:start, not align-items.

With align-content, you control the placement of the grid rows (more general: the tracks in block axis direction). The default is stretch, which causes the track size to increase to fill remaining free space. Use align-content:start, then the free space stays where it is.

With align-items, you control the placement of the grid cells within the track. The default is also stretch, which causes the cells to fill their track in block direction. With start, the cell size is determined by its content, but the grid track stays stretched.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.