CSS 網格容器
自己動手試一試 »
網格容器
要使 HTML 元素表現為網格容器，您需要將 display 屬性設定為 grid 或 inline-grid。
網格容器包含網格專案，放置在列和行中。
grid-template-columns 屬性
grid-template-columns 屬性定義了網格佈局中的列數，並且可以定義每列的寬度。
值是一個以空格分隔的列表，其中每個值定義相應列的寬度。
如果希望網格佈局包含 4 列，請指定 4 列的寬度，或者如果所有列應具有相同寬度，則指定“auto”。
示例
建立一個包含 4 列的網格
.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 屬性定義了每行的高度。
值是一個以空格分隔的列表，其中每個值定義相應行的高度。
示例
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
自己動手試一試 »
justify-content 屬性
justify-content 屬性用於在容器內對齊整個網格。
注意： 只有當網格的總寬度小於容器的寬度時，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 屬性用於在容器內垂直對齊整個網格。
注意： 只有當網格的總高度小於容器的高度時，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;
}
自己動手試一試 »
W3schools 學習路徑
跟蹤您的進度 - 免費！
