CSS 網格容器

1
2
3
4
5
6
7
8

親自試一試

網格容器

如需使 HTML 元素充當網格容器，您必須把 display 屬性設置為 grid 或 inline-grid。

網格容器由放置在列和行內的網格項目組成。

grid-template-columns 屬性

grid-template-columns 屬性定義網格布局中的列數，并可定義每列的寬度。

該值是以空格分隔的列表，其中每個值定義相應列的長度。

如果您希望網格布局包含 4 列，請指定這 4 列的寬度；如果所有列都應當有相同的寬度，則設置為 "auto"。

實例

生成包含四列的網格：

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

親自試一試

注意：如果在 4 列網格中有 4 個以上的項目，則網格會自動添加新行并將這些項目放入其中。

grid-template-columns 屬性還可以用于指定列的尺寸（寬度）。

實例

設置這 4 列的尺寸：

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

親自試一試

grid-template-rows 屬性

grid-template-rows 屬性定義每列的高度。

1
2
3
4
5
6
7
8

它的值是以空格分隔的列表，其中每個值定義相應行的高度：

實例

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

親自試一試

justify-content 屬性

justify-content 屬性用于在容器內對齊整個網格。

1
2
3
4
5
6
7
8

注意：網格的總寬度必須小于容器的寬度，這樣 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;
}

親自試一試

align-content 屬性

align-content 屬性用于垂直對齊容器內的整個網格。

1
2
3
4
5
6
7
8

注意：網格的總高度必須小于容器的高度，這樣 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;
}

親自試一試