一、網(wǎng)格容器

在CSS中，要創(chuàng)建并使用網(wǎng)格容器，你需要將元素的display屬性設(shè)置為grid或inline-grid。這樣，被設(shè)置的元素將成為塊級元素，并且其所有直接子元素都將位于一個網(wǎng)格格式的上下文中，這些子元素就被稱為網(wǎng)格項目。網(wǎng)格容器內(nèi)放置著由列和行內(nèi)組成的網(wǎng)格元素。

二、定義網(wǎng)格容器

1、grid-template-columns屬性

grid-template-columns屬性用于定義網(wǎng)格布局中的列數(shù)，并可以設(shè)置每個列的寬度。該屬性的值是一個以空格分隔的列表，其中每個值表示相應(yīng)列的寬度。如果希望網(wǎng)格布局包含4列，則需要設(shè)置4列的寬度，如果所有列的寬度都是一樣的，可以設(shè)置為auto。

以下實例設(shè)置了 4 列的網(wǎng)格布局：

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

注意：如果在 4 列網(wǎng)格中有 4 個以上的網(wǎng)格元素，網(wǎng)格布局會生成新的一行放置該元素。

grid-template-columns 屬性也可用于指定列的寬度：

.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}

2、grid-template-rows 屬性

grid-template-rows屬性用于設(shè)置網(wǎng)格布局中每一行的高度。屬性值是一個以空格分隔的列表，其中每個值定義相對應(yīng)行的高度：

.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

3、justify-content 屬性

justify-content 屬性用于對齊容器內(nèi)的網(wǎng)格，設(shè)置如何分配順著彈性容器主軸(或者網(wǎng)格行軸) 的元素之間及其周圍的空間。

注意：網(wǎng)格的總寬度必須小于容器的寬度才能使 justify-content 屬性生效。

.grid-container {
display: grid;
justify-content: space-evenly;
}

.grid-container {
display: grid;
justify-content: space-around;
}

.grid-container {
display: grid;
justify-content: space-between;
}

.grid-container {
display: grid;
justify-content: center;
}

.grid-container {
display: grid;
justify-content: start;
}

.grid-container {
display: grid;
justify-content: end;
}

4、align-content屬性

align-content 屬性用于設(shè)置網(wǎng)格容器中所有網(wǎng)格項在垂直方向上的對齊方式。

注意：網(wǎng)格元素的總高度必須小于容器的高度才能使 align-content 屬性生效。

.grid-container {
display: grid;
height: 400px;
align-content: center;
}

.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}

.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}

.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}

.grid-container {
display: grid;
height: 400px;
align-content: start;
}

.grid-container {
display: grid;
height: 400px;
align-content: end;
}