以前布局,有一个东西叫做文档流,也就是说页面其实是从上到下从左到右一点一点堆积起来的。不过有了grid之后这个情况将会发生改变,如果说以前的文档流布局是一维布局的话,那么grid我们可以把它理解成二维布局。
首先,grid的基本概念其实就是在父元素身上挖坑,然后用子元素去填。
1. 创建单元格
1.1 基础属性
通过将元素的父级设置display: grid;转化为网格布局。
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.box{
display: grid;
}

1.2设置行 列
grid-tamplate-columns
用来规定把父级的空间分割成多少列以及每一列的宽度,属性的参数数量就是划分为具体的多少列
.box{
display: grid;
grid-template-columns: 100px 200px 150px;
}

.box{
display: grid;
grid-template-columns: 100px 50% 150px;
}
这里是为了设置子元素的宽度,可以用百分比,也可以使用其他的单位。只要是宽度可以用的值在这里都是可以使用的。
grid-template-rows
,原理和columns 一样,设置每一行的高度
.box{
display: grid;
grid-template-columns: 100px 200px 150px;
grid-template-rows: 50px 100px;
}

综合写法:grid-template
grid-template:<‘grid-template-rows’> / <‘grid-template-columns’>
.box{
display: grid;
grid-template: 50px 100px /80px 50% 150px;
}
1.3 特殊单位: fr
它是一个相对单位。
比如上面grid-template-columns的值也可以这样设置: grid-template-columns:1fr 1fr 1fr; 这样便是把box分成了三列,并且每一列的宽度都占box宽度的3分之一,
为什么是三分之一呢? 因为有3个fr。
.box{
display: grid;
grid-template-rows: 1fr 1fr ;
grid-template-columns: 1fr 1fr 1fr;
/* grid-template: 1fr 1fr /1fr 1fr 1fr; */
}

1.4重复值函数: repeat
利用repeat函数来创建多个重复的列
repeat(4, 1fr);
第一个值是多少列 第二个值是每一列的宽度
.box{
display: grid;
/* grid-template-rows: 1fr 1fr ;*/
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template: repeat(2, 1fr) /repeat(3, 1fr);
}
1.5 auto-fill关键字
有时,单元格的大小是固定的,但是父级的大小不确定,如果希望父级每一行或每一列容纳尽可能多的单元格,这时可以使用 auto-fill
关键字表示自动填充
.box{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
1.6 auto 关键字
auto
关键字表示浏览器自己决定宽度或者高度
.box{
display: grid;
grid-template-columns: 100px auto 100px;
}
1.7grid-auto-columns属性和 grid-auto-rows属性
用于设置网格之外的元素的宽高
.box{
display: grid;
grid-template: repeat(2, 1fr) /repeat(3, 1fr);
}
2. 单元格合并
概念:网格线

记住上图,再往下看:
合并列:
grid-column-start: 1;
开始合并的列 从父级最左边开始算 如果有四列子元素,那么父级的最右边是5
grid-column-end: 4;
结束合并的列
综合:grid-column: 2 / 4;
开始合并的列和结束合并的列
合并行:
grid-row-start: 1;
开始合并的行
grid-row-end: 4;
结束合并的列
grid-row: 2 / 4;
开始合并的列和结束合并的列
<div class="box">
<div class="item" data-num="1"></div>
<div class="item" data-num="2"></div>
<div class="item" data-num="3"></div>
<div class="item" data-num="4"></div>
<div class="item" data-num="5"></div>
<div class="item" data-num="6"></div>
<div class="item" data-num="7"></div>
<div class="item" data-num="8"></div>
</div>

合并行
.item:nth-child(1){
grid-row-start:1;
grid-row-end: 3;
/* grid-row: 1/3; */
}

合并列
.item:nth-child(2){
grid-column-start:2;
grid-column-end:4;
}

.item:nth-child(2){
grid-column-start:2;
grid-column-end:4;
}
.item:nth-child(6){
grid-column-start:3;
grid-column-end:5;
}

改变位置
.item:nth-child(2){
grid-column-start:4;
grid-row-start:2;
}

Grid-template-areas
属性(用命名的方式合并行与列)
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
.box{
display: grid;
grid-template-columns: repeat(4,100px);
grid-template-rows: repeat(3, 150px);
/*每一组命名用引号包裹起来,直接写一行也可*/
/*把要合并的起一样的名称*/
grid-template-areas: 'left a b c'
'left r e e';
}
.item:nth-child(1){
grid-area: left;
}
.item:nth-child(6){
grid-area: e;
}

3. 单元格对齐方式
justify-items
和 align-items
针对单行
justify-items: 调整子元素水平对齐方式(调整子元素在主轴方向上的对齐方式)
定义元素对齐方式:
start
/ end
/ center
<!-- 垂直对齐方式 -->
<div class="box">
<span class="item"></span>
</div>
.box{
width: 500px;
height: 300px;
border: 1px solid #1890ff;
display: grid;
justify-items: center;
align-items: center;
}
.item{
width: 150px;
height: 60px;
background: #1890ff;
}

justify-content
和 align-content
针对多行
定义元素对齐方式:
normal
/ start
/ end
/ center
/ space-around
/ space-between
/ space-evenly
合并:place-content <align-content><justify-content>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
.box{
width: 850px;
height: 400px;
border: 1px solid #1890ff;
display: grid;
grid-template-columns: repeat(5, 110px);
grid-template-rows: repeat(2, 110px);
justify-content: center;
align-content: center;
grid-gap: 10px;
}
.item{
border: 1px solid #1890ff;
}

4.其他
grid-gap
用来创建行和列之间的空隙
接受两个值 第一个是行与行之间的间距 第二个是列与列之间的间距
如果只给一个值,那么行与列之间的间距是一样的
grid-row-gap
grid-column-gap
5.总结
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template: 100px 100px / 100px;
grid-auto-columns: 300px;
grid-auto-rows: 400px;
//auto-fill:
grid-template-columns: repeat(auto-fill, 100px);
//单元格合并:(设置给子级)
grid-column-start:1;
grid-column-end:3;
grid-column:2/4;
grid-row-start:1;
grid-row-end:3;
grid-row:2/4;
//给区域命名:
grid-template-areas: 'a a a'
'd e f'
'd h i';
grid-area: a;(设置给子级)
//单元格排列
grid-auto-flow: column;
justify-content: space-around;
align-content: center;
justify-items: center;
align-items: start;
//间隙
grid-gap: 10px;