Menu
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>
924
Change the row height to fit the contents Select the row or rows that you want to change. On the Home tab, in the Cells group, click Format. Under Cell Size, click AutoFit Row Height.
To allow the grid to auto-size it's height to fit rows, set grid property domLayout='autoHeight' .
auto. The auto keyword behaves similarly to minmax(min-content, max-content) in most cases. Since auto track sizes can be stretched by the align-content and justify-content properties, they will take up any remaining space in the grid container by default auto -matically.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
