CSS网格布局也具有与 flex 布局一样的"盒模型对齐"。例如属性 align-items、align-self、justify-items、justify-self，可选值：
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- lastbaseline
属性 align-content、justify-content，可选值：
- normal
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
- baseline
- first baseline
- lastbaseline
在父元素上设置 align-items 属性，相当于为所有子元素都设置了 align-self属性，justify-items 与 justify-self 的关系也同理。四个属性的默认值均为 stretch(在项目具有固定宽高比的情况下例外，因为会导致拉伸变形，所以这种情况下默认为start )。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 10px;
grid-auto-rows: 100px;
grid-template-areas:
"a a a a b b b b"
"a a a a b b b b"
"c c c c d d d d"
"c c c c d d d d";
}
.item1 {
grid-area: a;
background-color: turquoise;
}
.item2 {
grid-area: b;
background-color: tomato;
}
.item3 {
grid-area: c;
background-color: violet;
}
.item4 {
grid-area: d;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>
</body>
</html>
布局效果：
默认 stretch 对齐
更改对齐方式：
.item2 {
align-self: flex-start;
justify-self: center;
}
.item3 {
align-self: flex-end;
justify-self: center;
}
.item4 {
align-self: center;
justify-self: center;
}
布局效果：
更改子项目的对齐方式
如果网络轨道整体占据的空间小于网格容器，就可以在容器中对齐网格轨道。分别使用 align-content 、justify-content对齐列轴和行轴。
创建一个有多余空间的网格容器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
grid-gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
background-color: wheat;
}
.item1 {
grid-area: a;
background-color: turquoise;
}
.item2 {
grid-area: b;
background-color: tomato;
}
.item3 {
grid-area: c;
background-color: violet;
}
.item4 {
grid-area: d;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>
</body>
</html>
image.png
更改空间分配方式：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
grid-gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
align-content: space-between;
justify-content: space-around;
background-color: wheat;
}
布局效果：
更改 align-content 与 justify-content 属性 调整空间分配
可以看到 Item1 与 Item 2 在列轴方向上空间增大了，因为二者在列轴方向是跨列的项目，
align-content: space-between 改变了列轴的轨道宽度，因此导致跨列的项目会在列轴空间上增大。同理，Item1 与 Item4 在行轴方向上跨行，因为 justify-content: space-around 改变了行轴的轨道宽度，因此跨行的项目在行轴空间也增大。
去掉网格容器的对齐，对子项目设置 margin-left: auto; marigin-right: auto ，可以利用自动外边距使元素在项目中对齐。
.item1 {
margin-left: auto;
margin-right: auto;
}
布局效果：
利用自动外边距对齐
网友评论