grid-auto-columns
CSS property specifies the size of an implicitly-created grid column
track
or pattern of tracks.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
If a grid item is positioned into a column that is not explicitly sized by
grid-template-columns
, implicit
grid
tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.
/* Keyword values */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* <length> values */ grid-auto-columns: 100px; grid-auto-columns: 20cm; grid-auto-columns: 50vmax; /* <percentage> values */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400px); grid-auto-columns: fit-content(5cm); grid-auto-columns: fit-content(20%); /* multiple track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* Global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset;
<length>
Is a non-negative length.
<percentage>
<percentage>
value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like
auto
.
<flex>
fr
specifying the track’s flex factor. Each
<flex>
-sized track takes a share of the remaining space in proportion to its flex factor.
When appearing outside a
minmax()
notation, it implies an automatic minimum (i.e.
minmax(auto, <flex>)
).
max-content
Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.
min-content
Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
minmax(min, max)
<flex>
value sets the track’s flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).
fit-content(
argument
)
min(max-content, max(auto,
argument
))
, which is calculated similar to
auto
(i.e.
minmax(auto, max-content)
), except that the track size is clamped at
argument
if it is greater than the
auto
minimum.
auto
min-width
/
min-height
) of the grid items occupying the grid track.
注意：
auto
track sizes (and only
auto
track sizes) can be streched by the
align-content
and
justify-content
特性。
| 初始值 |
auto
|
|---|---|
| 适用于 | grid containers |
| 继承 | no |
| 百分比 | refer to corresponding dimension of the content area |
| 计算值 | the percentage as specified or the absolute length |
| 动画类型 | discrete |
<track-size>+where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere
<length-percentage> = <length> | <percentage>
<div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
#grid {
height: 100px;
display: grid;
grid-template-areas: "a a";
grid-gap: 10px;
grid-auto-columns: 200px;
}
#grid > div {
background-color: lime;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS 栅格布局
The definition of 'grid-auto-columns' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-auto-columns
|
Chrome
完整支持
57
|
Edge
完整支持
16
|
Firefox
完整支持
70
|
IE
完整支持
10
Alternate Name
|
Opera
完整支持
44
|
Safari 完整支持 10.1 | WebView Android 完整支持 57 |
Chrome Android
完整支持
57
|
Firefox Android
部分支持
52
注意事项
|
Opera Android
完整支持
43
|
Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
完整支持
部分支持
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。
grid-auto-rows
,
grid-auto-flow
,
grid