html文本不超出盒子大小,html-CSS-防止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;

}

1

Lots of text in here

3

Lots and lots and lots and lots of text in here as well

5

6

7

8

9