使用CSS Grid可轻松实现多列文章排版，通过display: grid和grid-template-columns定义列数，如repeat(3,1fr)创建三等列，结合gap设置间距；利用repeat(auto-fit, minmax(250px,1fr))实现响应式自适应，使不同屏幕下自动调整列数；通过align-items和justify-items控制对齐方式，grid-column: span 3实现标题跨列，整体布局直观灵活。
使用 CSS Grid 可以轻松实现多列文章排版，适合博客、新闻列表等场景。只需要几行代码就能让内容自动按列分布，并保持整齐对齐。
定义网格容器和列数
给文章的外层容器设置 display: grid，并通过 grid-template-columns 指定列的宽度。例如创建三列等宽布局：
.article-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
也可以用 repeat() 简化写法：
.article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
响应式自适应列数
为了让不同屏幕下自动调整列数，可以结合 minmax() 和 auto-fit：
立即学习“前端免费学习笔记（深入）”；
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
这段代码表示：每列最小 250px，最大为 1fr，浏览器会根据容器宽度自动换行并填充列数。在手机上可能只显示一列，平板上两列，桌面端三列或更多。
控制文章项的排列与对齐
如果想让文章卡片高度一致，可设置：
.article-grid {
align-items: start; /* 垂直顶部对齐 */
justify-items: stretch; /* 横向拉伸 */
}
每个文章项无需额外设置，Grid 会自动将其放入各自的网格单元格中。若需跨列（如标题通栏），可用：
.article-title {
grid-column: span 3; /* 跨越三列 */
}
基本上就这些。Grid 让多列排版变得直观又灵活，配合响应式设置能适配各种设备。不复杂但容易忽略细节是 gap 和 minmax 的搭配使用。
