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 isalign-items: stretch
). So just setalign-items: start
forgrid-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 isalign-self: stretch
). So just setalign-self: start
forgrid-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 withauto
values. Auto margins for grid cell take all available space in any direction. So just setmargin-bottom: auto
forgrid-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>