css栅格布局grid-template-columns有哪些实用使用技巧

CSS栅格布局中的grid-template-columns属性用于定义网格容器的列轨道大小，通过灵活配置该属性可以实现多列等宽、不等宽、自适应等多种布局效果，是栅格布局的核心配置项之一。

grid-template-columns基础用法

最基础的用法是直接指定每一列的宽度，多个值用空格分隔，每个值对应一列的宽度，值的个数就是列的总数。

/* 定义3列，宽度分别为100px、200px、150px */
.container {
    display: grid;
    grid-template-columns: 100px 200px 150px;
}

常用实用技巧

1. 使用fr单位实现比例分配

fr是栅格布局特有的单位，代表剩余可用空间的比例，适合实现列宽按比例分配的需求，不需要手动计算具体像素值。

/* 定义3列，宽度比例为1:2:1 */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

2. 使用repeat函数简化重复定义

当多列的宽度规则相同时，使用repeat函数可以减少重复代码，第一个参数是重复次数，第二个参数是每一列的宽度规则。

/* 定义4列等宽的列，每列宽度1fr */
.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* 定义6列，奇数行100px，偶数行200px */
.container {
    display: grid;
    grid-template-columns: repeat(3, 100px 200px);
}

3. 使用minmax函数设置宽度区间

minmax函数可以定义列的最小宽度和最大宽度，让列在指定区间内自适应变化，避免内容溢出或者列宽过宽。

/* 列最小宽度200px，最大占满剩余空间 */
.container {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
}

4. 使用auto关键字自适应内容

auto关键字会让列的宽度根据内容自动调整，适合内容长度不固定的列场景。

/* 第一列自适应内容宽度，第二列占剩余空间 */
.container {
    display: grid;
    grid-template-columns: auto 1fr;
}

响应式布局技巧

1. 结合媒体查询适配不同屏幕

在不同屏幕宽度下定义不同的grid-template-columns规则，实现响应式列布局。

.container {
    display: grid;
    grid-template-columns: 1fr; /* 移动端默认1列 */
    gap: 10px;
}

/* 屏幕宽度大于768px时显示2列 */
@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 屏幕宽度大于1200px时显示4列 */
@media (min-width: 1200px) {
    .container {
        grid-template-columns: repeat(4, 1fr);
    }
}

2. 使用auto-fit实现自动适配列数

auto-fit关键字可以自动根据容器宽度调整列数，不需要写多个媒体查询，配合minmax函数使用效果更佳。

/* 每列最小宽度200px，最大1fr，自动填充列数 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

常见注意事项

• grid-template-columns定义的列数如果少于网格项的数量，多余的网格项会自动生成隐式列，默认宽度为auto
• fr单位和固定像素值可以混合使用，固定像素值的列会先占用空间，剩余空间再按比例分配给fr单位的列
• 如果列的宽度总和超过容器宽度，默认会溢出容器，可配合overflow属性处理溢出情况

grid-template-columnsCSS_grid栅格布局响应式布局修改时间：2026-07-22 02:27:26