使用grid-template-columns和gap可高效构建响应式多列布局，前者定义列数与宽度，后者控制间距，避免外边距折叠，代码简洁易维护。
使用CSS Grid实现多列布局，关键在于grid-template-columns和gap属性的合理搭配。它们能帮助你快速定义列宽与列间间距，构建灵活、响应式的页面结构。
定义列数与列宽：grid-template-columns
通过grid-template-columns，你可以指定网格容器中每一列的宽度。支持多种单位，如像素（px）、百分比（%）、fr（弹性单位）等。
-
grid-template-columns: 100px 100px 100px;—— 创建三列，每列固定100px -
grid-template-columns: 1fr 2fr;—— 两列，第二列是第一列的两倍宽 -
grid-template-columns: repeat(3, 1fr);—— 使用repeat()函数创建三等分列 -
grid-template-columns: minmax(100px, 1fr) 2fr;—— 第一列最小100px，可弹性伸缩
设置列间距：gap属性
gap用于设置网格行与列之间的间距。在多列布局中，主要影响列与列之间的空白。
-
gap: 10px;—— 行和列间距均为10px -
column-gap: 20px;—— 单独设置列之间的间距 -
row-gap: 15px;—— 控制行间距，不影响列
使用gap代替传统的margin或padding，可以避免外边距折叠问题，布局更清晰。
立即学习“前端免费学习笔记（深入）”；
响应式多列布局实例
结合fr单位和gap，可轻松实现适配不同屏幕的布局。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
这个写法表示：每列最小250px，最大1fr，容器自动调整列数，始终保证内容不溢出，配合gap: 20px保持良好视觉节奏。
基本上就这些。掌握grid-template-columns的宽度分配方式和gap的间距控制，就能高效构建各种多列布局，无需浮动或定位，代码更简洁，维护更方便。
