用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 告诉浏览器尽可能多地放入满足最小宽度的列，并将剩余空间平均分配给这些列，使它们填满整个容器。基本上就这些。掌握repeat()的这几种用法，就能高效地构建出各种复杂的多列新闻列表布局，代码既简洁又灵活。
以上就是CSS Grid如何实现多列新闻列表布局_grid-template-columns repeat控制列数的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
150
收藏
