我有一个框的网格,我想在上面显示一些内容.但是,我也希望它们的大小都相同(根据窗口大小缩放).
我有以下代码：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
}
.grid-block {
border: 1px solid;
padding: 16% 0 16%;
margin: 20px;
text-align: center;
}<div class="grid-container">
<div class="grid-block">1</div>
<div class="grid-block">2</div>
<div class="grid-block">3</div>
<div class="grid-block">4</div>
<div class="grid-block">5</div>
<div class="grid-block">6</div>
<div class="grid-block">7</div>
<div class="grid-block">8</div>
<div class="grid-block">9</div>
</div>在这里,如果我用一些文本替换“ grid-block” div中的任何数字,则整个框和同一列上的所有框都会调整大小.
我想强制所有框的大小相同(随着窗口的增大或缩小而缩放).
最佳答案
从MDN开始：
The fr unit as a unit which represents a fraction of the available
space in the grid container.
用frs交换auto解决了您的问题.
编辑：为了使高度保持相等(但不固定),我正在使用minmax函数.我告诉网格,每个单元格必须至少是其默认大小auto,并且最多为网格的1个相等部分.结果就是您所追求的.如果一个单元格包含大量文本并增长了很多,则其他单元格将部分等同于最大的单元格已成长为的文本.
.grid-container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,minmax(auto,1fr));
padding: 10px;
}
.grid-block {
border: 1px solid;
padding: 16% 0 16%;
margin: 20px;
text-align: center;
}<div class="grid-container">
<div class="grid-block">1</div>
<div class="grid-block">Lots of text in here</div>
<div class="grid-block">3</div>
<div class="grid-block">Lots and lots and lots and lots of text in here as well</div>
<div class="grid-block">5</div>
<div class="grid-block">6</div>
<div class="grid-block">7</div>
<div class="grid-block">8</div>
<div class="grid-block">9</div>
</div>