<div class="container">
<div class="item item-a"></div>
<div class="item item-b"></div>
<div class="item item-c"></div>
<div class="item item-d"></div>
</div>
<style>
.item-a {
grid-area: header;
background: blue;
}
.item-b {
grid-area: main;
background: yellow;
}
.item-c {
grid-area: sidebar;
background: red;
}
.item-d {
grid-area: footer;
background: green;
}
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
</style>
这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个main区域、一个空单元格和一个sidebar区域组成。 最后一行是footer区域组成。
你的声明中的每一行都需要有相同数量的单元格。
您可以使用任意数量的相邻的
.来声明单个空单元格。 只要这些点号之间没有空格，他们就代表了一个单一的单元格。
justify-items
沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。
值：
- start: 内容与网格区域的左端对齐
- end: 内容与网格区域的右端对齐
- center: 内容位于网格区域的中间位置
- stretch: 内容宽度占据整个网格区域空间(这是默认值)
.container {
justify-items: start | end | center | stretch;
}
举例：
.container {
justify-items: start;
}
justify-items: start;
.container {
justify-items: center;
}
justify-items: center;
align-items
沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。
值：
- start: 内容与网格区域的顶端对齐
- end: 内容与网格区域的底部对齐
- center: 内容位于网格区域的垂直中心位置
- stretch: 内容高度占据整个网格区域空间(这是默认值)
.container {
align-items: start | end | center | stretch;
}
justify-content
有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。
值：
- start - 网格与网格容器的左边对齐
- end - 网格与网格容器的右边对齐
- center - 网格与网格容器的中间对齐
- stretch - 调整g rid item 的大小，让宽度填充整个网格容器
- space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
- space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
- space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
举例：
.container {
justify-content: start;
}
Example of justify-content set to start
简易写法（推荐）
image.png
