CSS Grid - Auto height rows, sizing to content

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 this answer.


You can try minmax(min-content, max-content) ref

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

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(min-content, 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>

You can also use only max-content or min-content

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

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: max-content; /* min-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>

Tags:

Css

Css Grid