Html CSS-防止div内容调整父级大小

Html CSS-防止div内容调整父级大小,html,css,css-grid,Html,Css,Css Grid,我有一个网格框,我想在其中显示一些内容。但是,我也希望它们的大小相同(根据窗口大小进行缩放) 我有以下代码: .grid容器{ 显示:网格; 网格模板列:自动; 填充:10px; } .网格块{ 边框:1px实心; 填充:16%016%; 利润率:20px; 文本对齐:居中; } 1. 2. 3. 4. 5. 6. 7. 8. 9 您只需为网格块或类似的框定义宽度和高度 .grid容器{ 显示:网格; 网格模板列:自动; 填充:10px; } .网格块{ 边框:1px实心; /*这里*/

我有一个网格框,我想在其中显示一些内容。但是,我也希望它们的大小相同(根据窗口大小进行缩放)

我有以下代码:

.grid容器{
显示:网格;
网格模板列:自动;
填充:10px;
}
.网格块{
边框:1px实心;
填充:16%016%;
利润率:20px;
文本对齐:居中;
}

1.
2.
3.
4.
5.
6.
7.
8.
9

您只需为
网格块
或类似的框定义
宽度
高度

.grid容器{
显示:网格;
网格模板列:自动;
填充:10px;
}
.网格块{
边框:1px实心;
/*这里*/
宽度:300px;
高度:70像素;
填充:16%016%;
利润率:20px;
文本对齐:居中;
}

一些随机文本一些随机文本
一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本
一些随机文本一些随机文本
一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本一些随机文本
5.
6.
7.
8.
9
来自:

fr单位作为代表一部分可用资源的单位 网格容器中的空间

auto
fr
s交换可以解决您的问题

编辑:为了使高度保持相等(但不固定),我正在使用
minmax
函数。我告诉网格,每个单元格的默认大小必须至少为
auto
,最多为网格的1等分。结果就是你所追求的。如果一个单元格包含大量文本,并且增长了很多,那么其他单元格将与最大单元格增长到的任何单元格几乎相等

.grid容器{
显示:网格;
网格模板列:重复(3,1fr);
网格模板行:重复(3,最小值(自动,1fr));
填充:10px;
}
.网格块{
边框:1px实心;
填充:16%016%;
利润率:20px;
文本对齐:居中;
}

1.
这里有很多文字
3.
这里也有很多很多很多的文字
5.
6.
7.
8.
9

对于
网格模板列,您可以使用
fr
单元,而不是
auto

了解有关FR单元的更多信息

.grid容器{
显示:网格;
网格模板柱:1fr 1fr 1fr;
填充:10px;
}
.网格块{
边框:1px实心;
填充:16%016%;
利润率:20px;
文本对齐:居中;
}

1asdfasdfsadasdfa asdfas asd a adsa
2.
3.
4.
5.
6.
7.
8.
9

是的,这就完成了宽度的调整。。。是否有类似的方法来控制高度,使所有箱子也具有相同的高度?