我有两个网格嵌套在一个网格中。不幸的是,右边的嵌套网格.grid-3
设置了行的高度,这样左边和右边的网格都是相同的高度,额外的空间是由类.right
在div之间共享的。我如何设置右边嵌套网格的行来调整内容的大小,使它们与左边嵌套行的高度相同?
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>
3条答案
按热度按时间ffvjumwh1#
你可以试试
minmax(min-content, max-content)
ref您也可以仅使用
max-content
或min-content
一个二个一个一个
frebpwbc2#
默认情况下,网格项目会拉伸到所有网格单元格区域。因此,如果您希望网格的高度适合内容,可以在此处使用以下选项:
align-items
为网格容器设置所有项目的对齐方式(默认值为align-items: stretch
)。因此只需为grid-2
设置align-items: start
。演示:align-self
(默认值为align-self: stretch
)单独设置网格项目的对齐方式。因此,只需为grid-3
设置align-self: start
。演示:一个二个一个一个
auto
值的margin
属性单独设置网格项的对齐方式。网格单元格的自动边距会占用任何方向的所有可用空间。因此,只需为grid-3
设置margin-bottom: auto
。演示:如果您希望右网格占用所有父级垂直空间,但使其单元格适合内容,请使用this answer。
xuo3flqw3#
你也可以尝试
grid-auto-rows: fit-content(1em);
。当然,使用任何对你有意义的大小。我也尝试了Temani描述的方法(minmax(min-content, max-content)
),在呈现我的HTML时结果是相同的。根据Elad Schechter - Medium,
fit-content函数只接受一个参数,即最大值...... fit-content()函数与minmax()函数类似,最小值为0。minmax()更有可能占用允许的最大空间,而fit-content不会占用超出必要的空间。
您的需要将决定
fit-content
是否比minmax
更合适,反之亦然。