1 画格子
1.1 定义边线
<body>
<div class="father"></div>
</body>
<style>
.father {
display: grid;
width: 400px;
height: 400px;
border: 1px solid red;
grid-template-rows: 20% 100px 10%;
grid-template-columns:repeat(5,20%) ;
}
</style>
- display:
- grid:是块级的
- inline-grid:是内联级的
- grid-template-cloums:设置水平方向的格子个数和每个格子的宽度，单位可以是
具体的值(100px)，百分比(20%)或(1fr 2fr 1fr)，repeat函数，1fr是自适应，跟flex:1,flex:2差不多 - grid-template-rows:和
grid-template-cloums相反 - repeact函数:
- repeat(5,20%):5个重复的20%
- repeat(2,10% 40%):10% 40% 10% 40%
- repeat(auto-fill, 70px):自动填充，每个长度单位是70px，不够70px的话换行
- repeat(2,minmax(50px,100px)):每个长度单位最小50px，最大100培训、
- repeat(3,1fr):分成3等分填充
- 间距:
- row-gap:10px;行与行之间的间距
- colum-gap:10px;列和列之间的间距
- gap:20px 10px;行间距是20px，列间距是10px
- gap:10px;行间距是10px，列间距是10px
1.2 给格子线起名
<body>
<div class="father"></div>
</body>
<style>
.father {
display: grid;
width: 400px;
height: 400px;
border: 1px solid red;
grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end] 100px [pjw];
grid-template-columns:repeat(5,[r-start] 1fr [r-end]) ;
}
</style>
<body>
<div class="father"></div>
</body>
<style>
.father {
display: grid;
width: 400px;
height: 400px;
border: 1px solid red;
grid-template-rows:repeat(3, [row-start] 1fr [row-end]);
grid-template-columns:repeat(3, [col-start] 1fr [col-end]);
}
</style>
1.3 定义区域
1.3.1 基本
grid-template-area相同的话会合在一起
<body>
<div class="father"></div>
</body>
<style>
.father {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 60px 1fr;
grid-template-areas: "header header" "nav main" "footer footer"
}
</style>
1.3.2 占位符
<body>
<div class="father"></div>
</body>
<style>
.father {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 60px 1fr;
grid-template-areas: ". ." ". ." "footer footer"
}
</style>
2 边线定位
2.1 格子边线序号
2.2 默认设置
如果里面的元素什么都不设置的话就是默认设置，默认是把里面的元素从左到右，从上到下的顺序塞进去
2.3 指定起始结束位置
.child1 {
grid-row-start: 1;
grid-row-end: 2;
grid-colum-start: 1;
grid-colum-start: 4;
}
2.4 用格子线的名字来指定
普通
.child1 {
grid-row-start: r1-start;
grid-row-end: r1-end;
grid-colum-start: r2-start;
grid-colum-start: r2-end;
}
repeat
.child1 {
grid-row-start: r-start 1;
grid-row-end: r-end 1;
grid-colum-start: c-start 1;
grid-colum-start: c-end 3;
}
2.5 简写形式
.child1 {
grid-row-start: 1;
grid-row-end: 2;
grid-colum-start: 1;
grid-colum-start: 4;
}
简写后
.child1 {
grid-row: 1/2
grid-colum: 1/4;
}
3 区域定位
3.1 根据边线定位
起始行线/起始列线/结束行线/结束列线
.child1 {
grid-area: 1/1/2/4;
}
3.2 根据区域定位
.child1 {
grid-area: header;
}
4 流动方向
grid-auto-flow：
默认是row，从左到右，从上到下
colum,从上到下，从左到右
grid-auto-flow：dense
该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。
.father {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 60px 1fr;
grid-auto-flow: row dense;
}
5 对齐方式
和flex里的justify-content和align-content一样
.child {
justify-content:
align-content:
}
6 整体控制grid内的元素
默认grid内的每个元素是撑满的，在.father中justify-items:stretch,align-items:stretch
7 单独控制grid内的元素
在.chlid中justify-self:,align-self:
网友评论