CSS网格-自动调整高度行,调整内容大小 [英] CSS Grid - Auto height rows, sizing to content
本文介绍了CSS网格-自动调整高度行,调整内容大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在一个网格中嵌套了两个网格.不幸的是,右嵌套网格.grid-3
设置行的高度,以便左网格和右网格都具有相同的高度,多余的空间在类.right
的div之间共享.如何设置右侧嵌套网格的行以调整内容的大小,使其与左侧嵌套行的高度相同?
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>
推荐答案
您可以尝试minmax(min-content, max-content)
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>
您也只能使用max-content
或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>
这篇关于CSS网格-自动调整高度行,调整内容大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文