使用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，可以避免外边距折叠问题，布局更清晰。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

响应式多列布局实例

结合fr单位和gap，可轻松实现适配不同屏幕的布局。

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

这个写法表示：每列最小250px，最大1fr，容器自动调整列数，始终保证内容不溢出，配合gap: 20px保持良好视觉节奏。

基本上就这些。掌握grid-template-columns的宽度分配方式和gap的间距控制，就能高效构建各种多列布局，无需浮动或定位，代码更简洁，维护更方便。