Grid：把活动卡片排成行与列
fr 是 Grid 中用于分配空间的单位，前面的数字表示分配权重；本例三个 1fr 各分一份。
定义三列，放入六张卡片
.programs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}grid-template-columns 中的三个值分别设置三列。六张活动卡片默认按源码顺序逐行放置。
同一列的卡片上下对齐
本例没有固定宽度的列。先留出两个 12px 列间距，再由三个 1fr 等分可分配的宽度。
假设内容区宽 600px，且内容不会撑大列宽：
（600 − 12 × 2）÷ 3 = 192px／列
“剩余空间”怎么算？加入固定宽度的一列
这里的“剩余”不是放完文字、图片后留下的空白。在下面的例子中，先扣除固定列宽和列间距，再分配剩余宽度。
第一列固定，后两列按 1∶2 分配
.programs {
display: grid;
width: 600px;
grid-template-columns: 200px 1fr 2fr;
gap: 20px;
}逐步计算
假设容器内容区宽 600px，且内容不会撑大列宽。
- 第一列占 200px。
- 两个列间距占 20 × 2 = 40px。
- 剩余宽度：600 − 200 − 40 = 360px。
- 后两列共分三份，每份 360 ÷ 3 = 120px。
第二列 1fr 得到 120px；第三列 2fr 得到 240px。
补充：repeat 简写与列宽限制
repeat(3, 1fr) 表示把 1fr 重复三次，等同于 1fr 1fr 1fr。
三个 1fr 并不在所有情况下都保证三列等宽。默认情况下，列有自动确定的最小宽度；长且不可换行的内容可能把其中一列撑大，使它不能按预期缩小。
如果希望列可以继续缩小，可写成：
grid-template-columns: repeat(3, minmax(0, 1fr));minmax(0, 1fr) 将每列的最小宽度设为 0，再用 1fr 分配空间。内容仍可能溢出；文字换行或溢出处理需要另行设置。
完整代码与运行演示
<style>
.programs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
article {
padding: 12px;
border: 1px solid teal;
}
</style>
<div class="programs">
<article>唱腔赏析</article>
<article>服饰观察</article>
<article>舞台交流</article>
<article>唱词阅读</article>
<article>角色介绍</article>
<article>活动记录</article>
</div>