海阔天空

手机扫码查看

grid网格布局

grid网格布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上
grid-template-columns
grid-template-rows
grid-template-columns: 1fr 1fr 1fr/100px auto 25%/repeat(3,1fr)
grid-template-rows :1fr 1fr 1fr/100px 100px 200px 100px/repeat(3,1fr)

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

---

grid-template-areas
grid-area
grid-template

area是区域的意思
grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template-rows,grid-template-columns和grid-template-areas属性的缩写。
案例：
.box2{
grid-template-columns: repeat(3,1fr)
grid-template-rows : repeat(3,1fr)
grid-template-areas:
“a1 a1 a1”
“a2 a2 a3”
“a2 a2 a3”;
}//名字自定义，定义在父容器上
.box2 div:nth-child(1){grid-area:a1;}
.box2 div:nth-child(2){grid-area:a2;}
.box2 div:nth-child(3){grid-area:a3;}
//跟父容器名字对应上，写在子项
简写：
.box2{
grid-template:
“a1 a1 a1” 1fr
“a2 a2 a3” 1fr
“a2 a2 a3” 1fr
/1fr 1fr 1fr;}
.box2 div:nth-child(1){grid-area:a1;}

---

grid-column-gap(左右间距)
grid-row-gap(上下间距)

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSSgrid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
grid-gap
grid-gap: 上下间距 左右间距

---

justify-items横向(上下)
align-items纵向(左右)
place-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。

取值
stretch，默认值，拉伸。水平或垂直填充
start 容器左侧或顶部对齐
end 容器右侧或底部对齐
center 水平或垂直居中对齐
place-items: 纵向 横向

---

justify-content
align-content
place-content

justify-content指定了网格元素的水平分布方式。
align-content指定了网格元素的垂直分布方式。
place-content可以让align-content和justify-content属性写在一个CSS声明中。

取值
stretch，默认值，拉伸。水平或垂直填充
start 容器左侧或顶部对齐
end 容器右侧或底部对齐
center 水平或垂直居中对齐
space-between 两端对齐
space-aroun 享有独立不重叠的空白空间
space-evenly 平均分配空白空间

---

作用在grid子项上
grid-column-start:2
水平方向上占据的起始位置
grid-column-end:3
水平方向上占据的结束位置(span属性)
grid-column
简写：grid-column-start/grid-column-end
grid-column：2/3

grid-row-start:2
垂直方向上占据的起始位置
grid-row-end: span 2//span代表是个数
垂直方向上占据的结束位置(span属性)
grid-row
简写：grid-row-start/grid-row-end
grid-row：2/span 2

grid-area
表示当前网格所占用的区域，名字和位置两种表示方法
grid-area:水平起始/垂直起始/水平结束/垂直结束
grid-area:3/2/4/4

justify-self
单个网格元素的水平对齐方式
align-self
单个网格元素的垂直对齐方式
place-self
简写place-self：align-self  justify-self

---

用网格布局完成骰子
样式：

.box{width: 400px;margin: 100px auto;}
.boxs{width: 100px;height: 100px;border: 1px solid;border-radius: 8px;
display: grid;place-items:center center;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
grid-template-areas:
“a1 a2 a3”
“a4 a5 a6”
“a7 a8 a9″;
}
.box1,.box2,.box3,.box4,.box5,.box6{float: left;}
.boxs div{width: 30px;height: 30px;background-color: black;border-radius: 50%;}
.box1 div{grid-area: a5}

.box2 div:last-child{grid-area: a9}

.box3 div:nth-child(2){grid-area: a5}
.box3 div:nth-child(3){grid-area: a9}

.box4 div:nth-child(2){grid-area: a3}
.box4 div:nth-child(3){grid-area: a7}
.box4 div:nth-child(4){grid-area: a9}

.box5 div:nth-child(2){grid-area: a3}
.box5 div:nth-child(3){grid-area: a5}
.box5 div:nth-child(4){grid-area: a7}
.box5 div:nth-child(5){grid-area: a9}

.box6 div:nth-child(2){grid-area: a3}
.box6 div:nth-child(3){grid-area: a4}
.box6 div:nth-child(4){grid-area: a6}
.box6 div:nth-child(5){grid-area: a7}
.box6 div:nth-child(6){grid-area: a9}

布局：
<div class=”box”>
<div class=”box1 boxs”>
<div></div>
</div>
<div class=”box2 boxs”>
<div></div>
<div></div>
</div>
<div class=”box3 boxs”>
<div></div>
<div></div>
<div></div>
</div>
<div class=”box4 boxs”>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class=”box5 boxs”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class=”box6 boxs”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

---

用网格布局完成百度风云榜

<style>
.box{width: 300px;height: 300px;margin: 50px auto;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4,1fr);
grid-gap: 6px 6px;
grid-template-areas:
“a1 a2 a2”
“a3 a2 a2”
“a4 a4 a5”
“a6 a7 a7″;
}
.box div{background-color: red;}
.box div:nth-child(1){grid-area: a1}
.box div:nth-child(2){grid-area:a2}
.box div:nth-child(3){grid-area:a3}
.box div:nth-child(4){grid-area:a4}
.box div:nth-child(5){grid-area:a5}
.box div:nth-child(6){grid-area:a6}
.box div:nth-child(7){grid-area:a7}
</style>

<div class=”box”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>