---

CSS格网布局中的grid-template-columns属性

CSS格网布局是一种强大的布局系统，可以通过将一个HTML元素分成等宽的栅格来帮助设计人员构建出完整的布局方案。在CSS格网布局中，grid-template-columns属性用于定义元素的列宽。

语法

grid-template-columns是一个用于定义列宽的属性，语法如下：

grid-template-columns: <track-size> <line-names>? <track-size> | <line-names> | <auto> | <minmax>

属性值可组合使用，用空格分隔。下面是属性值的说明：

• <track-size>：用于定义列宽的大小，支持长度单位（如px和em）和百分比。
• <line-names>：用于定义线的名称，可在其他属性中使用。这是可选的。
• <auto>：表示列宽将自适应尺寸。
• <minmax>：用于定义列宽的最小值和最大值。

示例

以下是几个示例。

等宽布局

如果一个元素中列宽应该相等，可以使用以下代码：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

这个代码将在元素中创建三列，每列的宽度为元素的1/3。

自适应布局

如果不指定列宽，元素将自适应大小。使用以下代码可实现自适应布局：

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

以上代码将在元素中创建三列，其中每一列的宽度也不同。

分列布局

使用下面的示例代码，您可以在元素中定义具有不同宽度百分比的列：

.grid {
  display: grid;
  grid-template-columns: 20% 50% 30%;
}

这个代码将在元素中创建三列，每列的宽度分别是20％，50％和30％。

列名称

在以下示例中，使用列名称用于指定不同样式的列：

.grid {
  display: grid;
  grid-template-columns: [first] 20% [second] 50% [third] 30% [end];
  }

这里的名称用于指定不同的列，例如"first"指的是第一列，可以在其他CSS属性中使用这个名称。

格网布局是设计人员非常喜欢的布局系统之一，因为它需要最少的代码，但可以创建出令人惊叹的布局。将grid-template-columns属性与其他CSS属性结合使用，可以创造出美观的布局。