簡單例子
<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;
}
複製程式碼