grid布局

CSS Grid布局

1.基本布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0OHqhJx-1626505727506)(C:\Users\2018-jsb\AppData\Roaming\Typora\typora-user-images\image-20200829140703793.png)]

实现上面布局

html
<view class="dis-gird">
    <view>1</view>
    <view>2</view>
    <view>3</view>
    <view>4</view>
    <view>5</view>
    <view>6</view>
    <view>7</view>
    <view>8</view>
    <view>9</view>
</view>


css
.dis-gird{
    display: grid;  //使用grid布局
    grid-template-columns: 33.33% 33.33% 33.33%;  //定义每一列的列宽
    grid-template-rows: 100px 100px 100px; //定义每一行的行高
    border:1px solid #ddd;
	view{
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
	}
    view:nth-child(even){
    	background: #C8C7CC;
    }
}

2.display:grid;

display: grid;  //使用grid布局
grid-template-columns: 33.33% 33.33% 33.33%;  //定义每一列的列宽
grid-template-rows: 100px 100px 100px; //定义每一行的行高

grid-template-columns 有几个参数 表示有几列 ，单位可以使用绝对单位（px）和百分比（%）。

grid-template-rows 有几个参数 表示有几行

grid-template-columns:25% 25% 25% 25%;
grid-template-rows:100px 100px 100px;
将元素分成三行四列  

3.grid-template-columns 和grid-template-rows

3.repeat()

repeat(x,value); x:要重复的次数 value:要重复的值；值也可以是某种模式

grid-template-columns:25% 25% 25% 25%;  
参数相同需要些四次，可以使用repeat();
grid-template-columns:repeat(4,25%);

grid-template-columns:repeat(2,100px 20px 60px); 
相当于
grid-template-columns:100px 20px 60px 100px 20px 60px；

4.auto-fill

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

grid-template-columns:repeat(auto-fill,100px);
每列宽100px 自动填充列

5. fr 关键字 （倍数）

grid-template-columns:1fr 2fr 1fr;  // 将元素分成三份  相当于25% 50% 25%


//可以和绝对单位混合使用。 第一列固定100px 剩下的宽度分成两列 前一列是后一列的两倍
grid-template-columns:100px 2fr 1fr;

6.minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

7.auto()

auto关键字表示由浏览器自己决定长度

grid-template-columns: 100px auto 100px;
元素分成三列 第一列和第三列 固定100px  第二列自适应

8.网格线的名称

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
网格布局允许同一根线有多个名字，比如[fifth-line row-5]

4.grid-row-gap 行间距

设置行与行的间隔（行间距）

div{
	display:grid;
	grid-template-columns:repeat(3,100px);
	grid-trmplate-row:repeat(3,100px);
	grid-row-gap:20px;  //行间距20px
}

5.grid-column-gap 列间距

设置列与列的间隔（列间距）

div{
	display:grid;
	grid-template-columns:repeat(3,100px);
	grid-trmplate-row:repeat(3,100px);
	grid-column-gap:20px;  //列间距20px
}

6.grid-gap

grid-row-gap 和 grid-column-gap的合并简写

grid-gap: grid-row-gap grid-column-gap;
grid-gap:10px 20px;//
grid-gap:20px 20px;  第一个值和第二个值相同  可以简写成  grid-gap:20px;

7.grid-template-areas 定义区域

先看效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A0jU02LJ-1626505727507)(C:\Users\2018-jsb\AppData\Roaming\Typora\typora-user-images\image-20200831140307332.png)]

实现代码

html
<view class="dis-gird">
    <view class="header">Header</view>
    <view class="nav">Navigation</view>
    <view class="main">Main area</view>
    <view class="footer">Footer</view>
</view>

css
.dis-gird {
    display: grid;
    width: 100%;
    height: 250px;
    grid-template-areas: "head head"
    					"nav  main"
    					"nav  foot"; 
    grid-template-rows: 50px 1fr 30px;
    grid-template-columns: 100px 1fr; 
    .header {
        grid-area: head;
        background-color: #8ca0ff;
    }
    .nav {
        grid-area: nav;
        background-color: #ffa08c;
    }
    .main {
        grid-area: main;
        background-color: #ffff64;
    }
    .footer {
        grid-area: foot;
        background-color: #8cffa0;
    }
}

解释： 通过 grid-template-rows 和 grid-template-columns 可以看出网格布局是被分成 两列 三行的
grid-template-areas: “head head” //定义第一行为 head
“nav main” //第二行为 nav + main元素 nav100px main撑满
“nav foot”; //第三行为 nav + foot

​ grid-template-areas 定义时还可以使用 ‘. ’ 表示某些区域不适用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8l42c2ww-1626505727514)(C:\Users\2018-jsb\AppData\Roaming\Typora\typora-user-images\image-20200831141909089.png)]

grid-template-areas: ". head"    //注意这里  将第一列使用了  "."  表示不使用
    				"nav  main"
    				"nav  foot"; 

​ grid-template-areas 定义时还可以使用 ‘. ’ 表示某些区域不适用

[外链图片转存中…(img-8l42c2ww-1626505727514)]

grid-template-areas: ". head"    //注意这里  将第一列使用了  "."  表示不使用
    				"nav  main"
    				"nav  foot";