grid网格布局
一、grid网格布局
二、作用在grid父容器
1. grid-template-columns、grid-template-rows列分布、行分布
grid：网格
template：模板
横向和纵向的分布画网格会同时使用，行和列的值可以是：px、百分比、auto、fr。当使用fr时，如果数值大于1，会根据整体按各自比例分布。如果整体小于1，会有空白空间。当有多个重复相等的布局时，可以使用repeat()第一个数值是几个，第二个是大小。
行列分布复写，值要用逗号隔开
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* 1 */
/* .box{width: 500px; height: 500px; border: 1px gray dotted;
display: grid; grid-template-rows: 100px auto 25%; grid-template-columns: 100px 100px 200px 100px;} */
/* 2 1个单位的fr，多个单位的fr会对整个块划分 */
/* .box{width: 500px; height: 500px; border: 1px gray dotted;
display: grid;grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;} */
/* 3 不足一个fr时，空白空间会有空余*/
/* .box{width: 500px; height: 500px; border: 1px gray dotted;
display: grid;grid-template-rows: .1fr .1fr .2fr; grid-template-columns: 1fr 1fr 1fr;} */
/* 4 */
/* 当写多个重复的网格时可以用repeat() */
.box{width: 500px; height: 500px; border: 1px gray dotted;
display: grid;grid-template-rows: repeat(3, 1fr); grid-template-columns: 1fr 1fr 1fr;}
</style>
</head>
<body>
<!-- 1 -->
<!-- <div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div> -->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
2. grid-template-areas 网格膜板区域
areas：区域
区域划分只能是划分成矩形的区域，不能设计成其他形状。
1.先对父容器进行等大小的网格分布，比如先设计9个等大小的网格。2.在父容器使用grid-template-areas对网格和区域进行划分，不同的名字组成不同的矩形，名字无所谓，比如第一个形状用a1,由多个叫a1的网格拼成想要的矩形。3.在对应的子容器上用grid-area指定div里的内容属于在哪个区域。
网格设置区域形状，就不会发生改变，能改变的只有指定对应不同的div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.box{
width: 300px;height: 300px;
border: 1px black dotted;
display: grid;
grid-template-rows: repeat(3 1fr);
grid-template-columns: repeat(3 1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
}
.box div{
background: blue;
border: 1px lightcoral solid;
}
.box div:nth-child(1){grid-area: a1;}
.box div:nth-child(2){grid-area: a3;}
.box div:nth-child(3){grid-area: a2;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
3. grid-template
grid-template是前三个的复合写法
先进行区域划分，在y轴写上行的大小分布，在x轴写上列的大小分布，列的前面有斜杠
4. grid-column-gap和grid-row-gap定义网格间隙，间距
gap:间隙；缺口；差距；分歧
grid-row-gap横向网格间距grid-column-gap纵向网格间距
5. grid-gap 网格间距
gird-gap是grid-column-gap和grid-row-gap复合写法。第一个值是row，第二个值是column。
6. justify-items和align-items 水平拉伸和垂直分布的对齐方式，对所有网格里面的内容调整。
justify:整理版面
justify-items和align-items是对所有网格的内容进行调整。
place-items是两个复写，第一个值是垂直方向纵向，第二个值是水平方向横向。
调整网格水平拉伸和垂直分布后，格子的大小由内容撑开。
<style type="text/css">
.box{
width: 300px; height: 300px; border: 1px gray dotted; display: grid;
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr);
justify-items: start;
align-items:end;
}
.box div{
background: blue;
}
</style>
7. justify-content和align-content水平和垂直的分布，对所有网格的整体位置调整。
justify-content和align-content是对网格整体的位置进行排列布局，也可以对空白区域进行利用分布。
place-content是这两个值得复写，第一个值是垂直方向纵向，第二个值是水平方向横向。
三、作用在grid子容器上
1.grid-column-start、grid-column-end、grid-row-start、grid-row-end
这是对列和行的起始结束线的边的选择，根据行列的起始结束位置，确定div的区域位置及大小。
如图，列和行分别有四个边，选择行和列的起始结束边，对区域的大小进行划分。行列都选择23，区域就会固定到中间。
行选择23，列选择24，区域就会固定到彩色的区域。
还可以对行列的end添加span，span 1，代表从开始的位置，往后占几个格子。
<style type="text/css">
.box{
width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
}
.box div{
background: red;border: 1px black solid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
</style>
============================
.box div{
background: red;border: 1px black solid;
grid-column-start: 2;
grid-column-end: span 2;
grid-row-start: 2;
grid-row-end: span 3;
}
2.grid-row、grid-column
这是对行列起始结束位置的简写。
中间用斜杠区分，前面是起始位置的值，后面是结束位置的值
3. grid-area 网格区域
可以划出网格所占用的区域，和网格起始结束位置的占用区域效果一致。
第一个值代表水平横向起始位置，第二个值代表垂直纵向起始位置，第三个值代表水平横向结束位置，第四个值代表垂直纵向位置。
grid-area: 3/2/4/4;
4. justify-self/align-self 对单个网格内部调整
.box1 div:nth-child(2){justify-self: start;align-self: end;}
5. place-self
justify-self和align-self的复写 第一个值是algin-self，第二个值是justify-self
.box1 div:nth-child(2){/* justify-self: start;align-self: end; */ place-self: end start;}
5426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
