响应式布局之grid网格布局_grid-template-columns: repeat(4, 1fr);

响应式布局之grid网格布局

二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OfRzQDyJ-1607600417627)(media/grid布局容器.png)]

<div class="container">
    
    <div class="item">
          <p>1</p>
    </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 class="item">7</div>
       <div class="item">8</div>
       <div class="item">9</div>
       <div class="item">10</div>
    
    


</div>
.container {
display:grid;//默认网格块类型  display:inline-grid;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.加在容器上的属性

1、grid-template-columns,grid-template-rows

grid-template-columns:100px 100px 100px;规定项目在容器排三列，每列100px宽度
grid-template-rows:100px 100px 100px 100px;规定项目在容器排四行，每行100px宽度
1
2

grid-template-*相关

1. repeat() 第一个参数是重复的次数，第二个参数是要重复的值

grid-template-columns:repeat(3,100px);

grid-template-columns:repeat(2,100px 80px 200px);
                                      100px 80px 200px 100px 80px 200px; 6列  以3份为一组一样

1
2
3
4
5

2.auto-fill 当单元格大小固定时，容器大小不固定时这个属性就会自动填充

grid-template-columns:repeat(auto-fill,100px);
1

3.fr 为了方便表示比例关系，网格布局提供了fr关键字(fraction片段)

grid-template-columns:repeat(4,1fr);宽度均分为4份
grid-template-columns:1fr 2fr 3fr;
1
2

4.minmax(,)函数产生一个长度范围，表示长度就在这个范围之中

grid-template-columns:1fr minmax(150px,1fr);//最小不会小于150px
1

5.auto 表示宽度自动

grid-template-columns:100px auto 100px; 中间列宽度自动
1

6.网格线 可以用方括号定义网格线名称，方便后期定位引用

grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4];
1

2.网格间距grid-gap

grid-gap:grid-row-gap grid-column-gap;    / gap:row-gap column-gap;
grid-row-gap:10px; /  row-gap:10px
grid-column-gap:20px; /column-gap:20px;

1
2
3
4

新的网格布局把该属性的grid-取消

3、容器属性grid-template-areas

一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)

grid-template-areas: 'a b c'
                     'd e f'
                     'g h i'
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c'

grid-template-areas: 'a · c'
                     'd ·f'
                     'g ·i'  区域不需要利用，则使用点表示 

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start
终止网格线自动命名为区域名-end

1
2
3
4
5
6
7
8
9
10
11
12
13
14

4、grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行(就是子元素的排放顺序)

grid-auto-flow:row;
grid-auto-flow:column;
grid-auto-flow:row dense;  dense紧凑布局 (空间利用率较高)
grid-auto-flow:column dense;  dense值用于某些项目指定位置以后，剩下的项目怎么自动放置

1
2
3
4
5

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LqhDOAX8-1607600417631)(media/dense.png)]

5:对齐方式 justify-items和align-items

设置单元格内容的水平和垂直对齐方式

justify-items:start|end|center|stretch（默认值）
align-items:start|end|center|stretch

1
2
3

place-items是以上两个属性的合并简写形式

place-items:align-items  justify-items;

1
2

6：对齐方式justify-content/align-content

设置整个内容区域的水平和垂直对齐方式

justify-content:start/end/center/stretch/space-around/space-between/space-evenly
align-content:start/end/center/stretch/space-around/space-between/space-evenly

1
2
3

7：grid-auto-columns/grid-auto-rows

设置多出来(没有设置的剩余项目)的大小

3*3 剩余1个 
grid-auto-rows:50px;

1
2
3

2.加在项目上的属性

一：grid-column-start/grid-column-end

grid-row-start/grid-row-end

指定项目具体位置

grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;

1
2
3
4
5

属性简写:

grid-column:1/3;

grid-row:1/3;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-klaSuXBz-1607600417633)(media/star-end.png)]

另外一种写法:（不要记）

grid-column-start:span 2;  span 跨越几条网格线 从第一条跨越
grid-column-end:span  2;

1
2
3

二：grid-area

指定项目放在哪一个区域

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c'

grid-area:b;

1
2
3
4
5
6

还可以写成:

grid-area:row-start / column-start / row-end/ column-end
grid-area:1/1/3/3; 相当于
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;


1
2
3
4
5
6
7
8