用CSS Grid做多列新闻列表，核心是grid-template-columns搭配repeat()函数。例如，repeat(3, 1fr)可创建三列等宽布局；repeat(auto-fit, minmax(250px, 1fr))则能实现响应式自适应，根据屏幕大小自动调整列数，配合gap设置间距，代码简洁且灵活。
用CSS Grid做多列新闻列表，核心就是grid-template-columns搭配repeat()函数。它能让你用极少的代码定义出等宽、不等宽或响应式的多列布局，特别适合新闻卡片这种结构化内容。
基础等宽多列布局
要创建一个固定数量的等宽列，比如经典的三栏新闻列表，直接用repeat()指定列数和每列的宽度比例。
例如，下面的代码会生成一个三列等宽的网格：
.news-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }说明： 1fr代表一个“分数”单位，将容器可用空间均分。这里repeat(3, 1fr)等同于写1fr 1fr 1fr，但简洁得多。配合gap属性设置列间距，视觉效果更佳。
立即学习“前端免费学习笔记（深入）”；
混合模式与固定边距
如果需要两侧有固定宽度的边栏，中间是弹性主内容区，可以在repeat()前后添加具体的长度值。
说明： 这个布局定义了五列：第一列宽250px，然后是三个等分的弹性列（1fr），最后一列也是250px。这在需要侧边导航或广告位的新闻网站中很常见。
响应式自适应多列
对于现代网页，让列数根据屏幕大小自动调整是关键。repeat()结合auto-fit和minmax()可以轻松实现。
说明： 这是最强大的用法之一。
-
minmax(250px, 1fr)定义了每列的最小宽度为250px，最大为1fr（即尽可能拉伸）。 -
auto-fit告诉浏览器尽可能多地放入满足最小宽度的列，并将剩余空间平均分配给这些列，使它们填满整个容器。 - 当屏幕变窄时，一旦无法容纳下一个250px的列，浏览器就会自动减少一列，从三列变成两列，再变成单列，实现了无缝的响应式效果。
基本上就这些。掌握repeat()的这几种用法，就能高效地构建出各种复杂的多列新闻列表布局，代码既简洁又灵活。
