CSS3 grid-columns 属性

在 CSS 中，grid-columns 属性用于定义一个元素在网格布局中占据的列数。网格布局是一种灵活的布局方式，可以让开发者更轻松地控制页面的布局。

语法

grid-columns: <列数>;

• <列数>: 可以是一个数字，表示元素占据的列数。也可以是一个关键字，比如 auto 表示自动占据一列，1fr 表示占据剩余空间的一部分。

示例

// www.javascriptcn.com code example
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item1 {
  grid-columns: 2;
}

.item2 {
  grid-columns: auto;
}

在上面的示例中，我们首先定义了一个网格布局，分为三列，每列的宽度平分剩余空间。然后我们给两个元素分别设置了 grid-columns 属性，一个元素占据了两列，另一个元素自动占据一列。

注意事项

• 当使用 grid-columns 属性时，需要确保父元素使用了 display: grid 或 display: inline-grid 属性，否则 grid-columns 不会生效。
• 如果多个元素设置了相同的 grid-columns 值，它们会在同一列中显示，如果值不足以完全显示所有元素，会自动换行显示。