grid 栅格化布局

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-columns100px 100px 100px 竖向排列,其属性值为竖向排列的长度 此时有三行

grid-template-rows100px 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-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-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

网页上如何显示Tif格式文件的问题,显示.tif格式的图片!
« 上一篇 2020年10月26日 上午12:00
JavaScript数据类型
下一篇 » 2020年10月26日 上午12:00