CSS grid-auto-columns 属性

概述

CSS grid-auto-columns 属性定义了在网格布局中没有明确指定宽度的列的大小。如果网格容器中有多余的列没有指定宽度，这些列将由 grid-auto-columns 控制它们的大小。

grid-auto-columns: column-size | auto | max-content | min-content | fit-content(<length-percentage>) | repeat(auto-fill | auto-fit, column-size?)

指定一个固定的列宽。它可以接受所有CSS尺寸单位，比如px，em等。

默认值为auto，指定网格容器自动分配列宽，以使所有内容都适应这些列或网格区域。

列宽将被设置为所需内容的最大可用宽度。

列宽将被设置为所需内容的最小可用宽度。

该属性指定列宽适应内容的大小，但不超过指定长度（例如，fit-content（100px））或相对大小（例如，fit-content（50％））

该属性指定自动地重复列，以使其填充可用空间，或自动自适应大小以填充可用空间。

.grid-container {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-auto-columns: 100px;
}

此示例将网格容器的前两列设置为以内容自适应大小，而第三列为固定的100像素宽度。

另一个示例，使用 repeat()，将自动重复一个100px宽度的列，直到网格容器填满可用空间：

.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-columns: repeat(auto-fill, 100px);
}

CSS grid-auto-columns 使得网格布局更加灵活，并且可以允许网格容器自动适应内容或自动重复列来填满可用的空间。在实际应用中的网站设计中，可以根据布局和UI要求，灵活使用该属性，帮助开发人员快速而准确地构建网格布局。