简单例子
<div class="wrap">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
<div class="e">5</div>
<div class="f">6</div>
</div>
<style>
.wrap {
display: grid;
grid-template-columns: 100px 50px 100px;
grid-template-rows: 100px 100px;
}
</style>
The two axis of a grid layout
几个控制对齐方式的属性
block axis 方向上
- align-items (使用在container上，使用过flexbox布局的同学都知道)
- align-self (使用在item上)
在之前的例子上，在container上添加align-items: center;在div.c上添加align-self: end；效果如下
inline axis 方向上
- justify-items (使用在container上, 类似与flexbox justify-content)
- justify-self (使用在item上)
继续上面的例子，如果在container上再添加justify-items: center,div.c上添加justify-self: start,效果如下
除了控制grid内部元素的对齐方式，还可以控制grid在container中的对齐方式
block axis 方向上
- align-content
inline axis 方向上
- justify-content
假如想垂直水平居中grid，很简单：
.wrap {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px;
width: 200px;
height: 150px;
border: 1px solid saddlebrown;
justify-content: center;
align-content: center;
}
