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 学习路径
跟踪您的进度 - 免费！
