直接上代码
1、grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-
repeat(auto-fill, ...)- 自动填充列，会根据容器宽度自动创建尽可能多的列 -
minmax(240px, 1fr)- 设置每列的宽度范围：- 最小宽度是 240px
- 最大宽度是 1fr（可用空间的一等份）
这个属性的作用是：
- 创建响应式网格布局
- 当容器宽度足够时，会自动创建多列
- 每列至少240px宽
- 列数会根据容器宽度自动调整
- 当屏幕变窄时，列数会减少
- 当屏幕变宽时，列数会增加
这样可以实现自适应的卡片布局，不需要手动设置媒体查询就能适应不同屏幕尺寸。
要看到效果，你可以尝试调整浏览器窗口大小，你会看到消息卡片的排列会自动调整。
2、grid-template-rows: subgrid; grid-row: span 4;
-
grid-template-rows: subgrid- 让子元素继承父网格的行轨道大小
- 子元素的行会与父网格的行对齐
- 使子网格能够与父网格保持一致的行高
-
grid-row: span 4- 指定这个元素要跨越4个网格行
span 4表示从开始位置占据4个网格轨道的空间- 子元素有多少个要对齐，就写多少个
这两个属性组合使用的效果是：
- 每个 message-box 会在父网格中占据4行的高度
- message-box 内部的元素（头像、内容、时间戳）会自动对齐到这4行的网格中
- 保持了所有 message-box 的统一布局和对齐
