拓展应用 · 布局
Grid：把活动卡片排成行与列
希望多行卡片沿相同的列对齐时，可以让 Grid 同时管理行与列。
定义三列，放入六张卡片
.programs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}<div class="programs"> 内放六个 <article>。默认按源码顺序逐行放置，多出的卡片进入下一行。
同一列的卡片上下对齐
grid-template-columns 定义列的尺寸；本例的三个 1fr 让三列等分可分配的剩余空间。
先留出两个 12px 列间距，再分配空间。因此一列不是容器总宽度的简单三分之一。
1fr 与 repeat、minmax 的关系
fr 表示剩余空间的份额。三个 1fr 可简写为 repeat(3, 1fr)。
长且不可换行的内容可能撑大 1fr 的自动最小尺寸。repeat(3, minmax(0, 1fr)) 把每列的最小尺寸设为 0；但文字如何换行，仍需要另行处理。
完整代码与运行演示
<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>