grid 初始化元素为栅格化
将一个HTML元素转换为网格的容器,只需要对其设置display: grid即可。display: grid告诉我们,可以使用CSS Grid的相关属性了。
<dl class="container">
<dd class="item1">item1</dd>
<dd class="item2">item2</dd>
<dd class="item3">item3</dd>
<dd class="item4">item4</dd>
<dd class="item5">item5</dd>
<dd class="item6">item6</dd>
</dl>
.container{
display: grid;
}
常用的属性:
grid-template-columns:100px 100px 100px 竖向排列,其属性值为竖向排列的长度 此时有三行
grid-template-rows:100px 100px 横向排列,其属性值为横向排列的长度 此时有两列
grid-tamplate: 100px 100px 100px / 100px 100px 上面两个属性的简写 用/分隔开来
grid-gap:10px 10px 5px 5px; 上右下左的间距
align-self:交叉轴上的对齐方式(子代设置属性)
justify-self:主轴上的对齐方式(子代设置属性)
对齐方式常用属性值
flex-start 从开始的地方水平/垂直对齐 ,默认是左
flex-end 从结束的地方水平/垂直对齐 ,默认是右
center 居中
space-between 水平/垂直方向首尾紧贴父元素,中间间隙等分
space-around 水平/垂直方向的子元素之间的左右/上下间距相等,相邻元素之间的间距为两倍间距
我们想对所有子元素内容进行水平方向的排列,那么需要在设定的容器中使用justify-items属性,而不是一个个子元素进行设置justify-self属性。justify-items属性值同justify-self。
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
}
复制代码
同理的,我们想对所有子元素内容进行垂直方向的排列,那么需要在设定的容器中使用align-items属性,而不是一个个子元素进行设置align-self属性。align-items属性值同align-self。
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
align-items: center;}
参考
链接:https://juejin.im/post/6886367930523746312
【 微信扫一扫 】