grid
是一個CSS簡寫屬性,可以用來設置以下屬性:
顯式網格屬性 grid-template-rows、grid-template-columns
和 grid-template-areas
,
隱式網格屬性 grid-auto-rows、grid-auto-columns
和 grid-auto-flow
,
間距屬性 grid-column-gap
和 grid-row-gap
。
注意:您僅可在一個 grid
屬性中聲明顯式或隱式網格。與其他簡寫屬性同樣,若有次級屬性未被聲明,其將使用初始值。另外,儘管此簡寫聲明無法設置網格的槽(gutter
),槽會被該聲明重置。
語法
/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
/* <'grid-template-rows'> /
[ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
<'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
/* Global values */
grid: inherit;
grid: initial;
grid: unset;
值
<'grid-template'>
定義了 grid-template
,其包含 grid-template-columns,grid-template-rows
和 grid-template-areas
。
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
通過 grid-template-rows
屬性顯式設置行軌道來設置自動流(grid-template-columns
屬性設爲 none
),並通過 grid-auto-columns
明確該如何自動重複列軌道(同時grid-auto-rows
屬性設爲 auto
)。grid-auto-flow
屬性也被相應的設置爲 column
,並可附有 dense
。
所有其餘 grid
次級屬性被重置爲初始值。
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
通過 grid-template-columns
屬性顯式設置列軌道來設置自動流(grid-template-rows
屬性設爲 none
),並通過 grid-auto-rows
明確該如何自動重複行軌道(同時grid-auto-columns
屬性設爲 auto
)。grid-auto-flow
屬性也被相應的設置爲 row
,並可附有 dense
。
所有其餘 grid 次級屬性被重置爲初始值。
標準語法
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
實例
HTML
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
}
結果