css

Grid布局

Posted by Leo on 2019-07-23

Grid布局

一、前言

Grid布局是css最强大的布局，它和Flexbox布局差不多，只是grid看作是二维布局，而flexbox看作是一维布局。在一些数据可视化的页面布局中，使用grid布局能让你爽到上天。
Grid布局的属性又可以分为俩类：容器属性和项目属性。

二、网格布局中的概念

2.0 容器

网格布局的区域，我们成为“容器”，“容器”内采用网格定位的子元素，成为“项目”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
  <div class="item item-10">
  <span>我不是项目</span>
  </div>
</div>

如最外层的 div 元素就是容易，里面的 10个div为项目，但是 其中最后一个 div元素中 包含的 span 元素 就不能称之为 项目。它只能是容器的顶层子元素,grid布局只对项目有效。

2.1行和列

容器里面的水平区域称为"行(row)",垂直区域称为"列(column)"。如下图 长方形内的区域就是列，椭圆形内的区域就是行

行好列

2.2 cell

单元格：行和列交叉的区域。n行和m列会产生n*m个单元格

2.3 网格线

如图红色的线即为网格线

网格线

三、容器属性

3.1 display属性

怎么启用grid布局，我们知道在使用flexbox布局的时候，我们设置display:flex;同理设置grid布局：display:grid | inline-grid;默认情况下容器为块级元素。

注意：当我们设置网格布局以后，容器子元素（项目）的 float、display：inline-blick、display:table-cell、vertical-align、column-设置失效

3.2 grid-template-columns/grid-template-rows

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
用法：

1
2
3
grid-template-columns: <track-size> ... | <line-name> <track-size> ...; 

grid-template-rows: <track-size> ... | <line-name> <track-size> ...;

  • track-size：定义网格单元的宽高，其单位可以是一个长度(如px、em、rem、vw、vh)或百分比，也可以是网格中自由空间的份数(单位为fr)。

  • line-name：定义网格线的名称，它不是必须值。可以一个你选择的任意名字，当没有显示设定时，它的名字以数字表示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
 .container {        
       width: 500px;        
       height: 500px;
       display: grid;     
       grid-template-columns: 33% 33% 33%;         
       grid-template-rows: 33% 33% 33%;     
   }    
   .container div { 
      border: 1px solid #000;    
   }
</style>
<div class="container">
    <div></div>        
    <div></div>        
    <div></div>        
    <div></div>        
    <div></div>        
    <div></div>        
    <div></div>        
    <div></div>        
    <div></div>    
</div>

网格布局

3.2 repeat(repeatNum,value)

当你想定义重复部分的时候，可以使用repeat()函数去简化。

1
2
3
4
5
6
7
.container {        
      width: 500px;        
      height: 500px;
      display: grid;     
      grid-template-columns: repeat(3,33%);         
      grid-template-rows:repeat(3,33%);   
  }

这个函数有时候也可以这么使用如下代码

1
2
3
4
5
6
.container {        
       width: 500px;        
       height: 500px;
       display: grid;     
       grid-template-columns: repeat(2,100px 50px 30px);         
   }

其实他就是重复了俩次即

1
100 50 30 100 50 30

3.3 auto-fill

因为单元格的大小是可以固定的，如果我们要想在容器中尽可能的多装单元格，可以设置 auto-fill关键字，表示自动填充。如下代码 容器最大宽度是400px, item的宽度是100px;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 <style>
      #container{
  display: grid;
  max-width: 400px;
  grid-template-columns: repeat(auto-fill,100px);

}

.item {
  font-size: 4em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

<div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
</div>

auto-fill

3.4 fr

fr这个单位有点和flexbox中的flex-grow类似，如下代码

1
2
3
4
.container{
 display:grid;
 grid-template-columns: 3fr 2fr 1fr
}

3.5 minmax(min,max)

该函数表示一个区间长度的范围。

1
grid-template-columns:minmax(100px,2fr); //100px < length <2fr

3.6 auto

这个关键字的意思就是让浏览器去决定长度大小

1
grid-template-columns:200px auto 200px;

如果不设置单元格的min-width，第二列等于该列单元格的最大宽度。

3.7 网格线的名称

grid-template-columns和grid-template-rows在设置的时候，还可以设置每一根线的名字，一根网格线可以有多个名字，如下代码：

1
2
3
4
5
.container{
 display:grid;
 grid-template-columns:[name1] 100px [name2] 200px [name3] 40px [name5];
  grid-template-columns:[name1 otherName1] 100px [name2] 200px [name3] 40px [name5];
}

有了网格线名字之后，我们就可以利用名字去定位项目了。（详细会在项目属性的时候讲解）。
我们在命名网格线名字的时候，最好是 xxx-start / xxx-end 的格式去命名，虽然系统会隐式的在我们名字之后加上start/end;

3.8 间距

grid-row-gap设置行与行之间的距离，grid-column-gap设置列与列之间的距离。
简写属性:grid-gap:<grid-row-gap><grid-column-gap>

3.9 区域

一个区域由单个或者多个单元格组成，grid-template-areas用于定义区域。

1
2
3
4
5
6
7
8
.container{
  display: grid;
 grid-template-columns: 100px 100px 100px;
 grid-template-rows: 100px 100px 100px;
 grid-template-areas: 'a b c'
                      'd e f'
                      'g h i';
}

区域

如果某些区域不需要使用，则我们可以使用点来表示(.),即该单元格不属于任何区域。

1
2
3
grid-template-areas: 'a . c'
                    'd . f'
                    'g . i';

4.0 网格元素方向 grid-auto-flow

这个属性有点和flexbox布局中的flex-direction:row/column属性类似。
grid-auto-flow:row子元素会先行后列的形式排列；
grid-auto-flow:column子元素会先列后行的形式排列；
grid-auto-flow:row dense:“先行后列”，并且尽可能紧密填满，尽量不出现空格。
grid-auto-flow: column dense:表示"先列后行"，并且尽量填满空格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
**grid-auto-flow:row:**
.container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: row;
}
.item-1 {
  background-color: #ef342a;
  grid-column-start: 1;
  grid-column-end: 3;  
}

.item-2 {
  background-color: #f68f26;
  grid-column-start: 1;
  grid-column-end: 3; 
}

row

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
**grid-auto-flow:row dense:**
.container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: row dense;
}
.item-1 {
  background-color: #ef342a;
  grid-column-start: 1;
  grid-column-end: 3;  
}

.item-2 {
  background-color: #f68f26;
  grid-column-start: 1;
  grid-column-end: 3; 
}

row dense

4.1 justify-items 属性，align-items 属性

这俩个属性和flexbox中:justify-content和align-items属性一样；

place-items属性是align-items属性和justify-items属性的合并简写形式

1
place-items:<align-items> <justify-items>

4.2 justify-content 属性，align-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置;
它的值中有一个是：space-evenly:项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
其他属性和justify-items属性一样用法。

place-content属性是align-content属性和justify-content属性的合并简写形式。

1
place-content: <align-content> <justify-content>

4.3 grid-auto-rows 属性，grid-auto-columns 属性

这俩个属性用来设置多余的行高和列宽。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
  #container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

.item {
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
  grid-row-start: 4;
  grid-column-start: 2;
}

.item-9 {
  background-color: #4dc7ec;
  grid-row-start: 5;
  grid-column-start: 3;
}

第八和第九为多余生产的，行高为 50px

四、项目属性

1.0 网格线(grid-column-start/end,gird-row-start/column)

项目的位置是可以指定位置的，其实就是指定网格线的位置

1
2
3
4
5
6

.item-1 {
  background-color: #ef342a;
  grid-column-start: 1;//列 第1根网格线
  grid-column-end: 3;//列 第三根网格线
}

网格线的简写grid-colunm: grid-column-start/end grid-row: grid-row-start/end

1
2
3
4
.item {
  grid-column: 1 / 3;
  grid-row:  1 / 3;
}

也可以用span标示跨域了多少个格，如上面的代码改为 grid-column:1 / span 3：

1.1 区域：grid-area

区域可以有任意数量的网格单元组成。直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    #container{
    
   display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
 grid-auto-flow: row;
  grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';}
                     
.item-1{
  background-color: #ef342a;
 grid-area: e;//指定了 item-1在 e 区域
}

grid-area还可以是 : <grid-row-start> / <grid-column-srart> / <grid-row-end> /<grid-column-end>的简写形式

1
2
3
.item-1{
grid-area: 1 / 1 / 3  / 3;
}

1.2 justify-self/align-self

这俩个属性就是设置项目自身的水平和垂直位置。和flexbox中的属性align-self类似
其简写属性：place-self:<align-self> <justify-self>;

五、总结

grid布局和flexbox有许多相识的地方，但grid布局在数据可视化页面布局中，运用起来十分舒服，笔者在平常开发中一般很少使用grid布局，😆。不过并不影响它的强大性哇。




FEATURED TAGS
css
FRIENDS