Login/Register
CSS Grid - Auto height rows, sizing to content
Asked Answered
Solved csscss-grid
C

4

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>
Collyer answered 6/4, 2018 at 21:48 Comment(0)
I
117

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>
Izzo answered 6/4, 2018 at 21:56 Comment(1)
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. – Orose
O
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>
Orose answered 8/4, 2018 at 10:27 Comment(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 – Weissberg
@Weissberg 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. – Orose
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. – Fredia
V
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.

Vizier answered 29/3, 2020 at 20:34 Comment(0)
A
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.

Agrobiology answered 19/3 at 7:35 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.