目前还是实验属性，其引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。包含以下属性：

  • Fixed and flexible track sizes 固定像素或者弹性的单元格
  • Item placement 可以指定网格元素的位置或者算法计算位置
  • Creation of additional tracks to hold content 创建容纳内容的网格块
  • Alignment control 对齐控制
  • Control of overlapping content 溢出内容控制

Grid 容器

1
2
3
4
5
6
7
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
1
2
3
4
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
  • grid-template-columns设置多列元素的每列宽度；Grid引入新单位fr，表示fraction，页面可用空间的比例。单位也可以混合使用，如grid-template-columns: 500px 1fr 2fr;
  • 可用repeat()来定义多个等宽单元格。grid-template-columns: repeat(3, 1fr);同样可混合使用。repeat(5, 1fr 2fr)表示(1fr 2fr)*5
  • 同理 grid-template-rows设置每行高度
  • grid-auto-rows grid-auto-columns则设置行高/列宽，minmax(100px,auto)设置最小和最大宽高

Grid Lines

从上至下，从左至右分别从1开始递增。
负数则从下至上，从右至左从-1开始递减。
image_1bo1ltm0ad0lg7513lqge613io3d.png-26.3kB
网格定位是基于网格线，使用grid-column-start, grid-column-end, grid-row-start and grid-row-end属性

1
2
3
4
5
6
7
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 

.box1 { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.box2 { 
  grid-column-start: 1; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

image_1bo1m8d9c10ai5djq3uo0r4673q.png-21.3kB
该属性可以简写为:

1
2
grid-column: grid-column-start / grid-column-end;
   grid-row: grid-row-start / grid-row-end;

另外如果网格只占一行或者一列，则grid-row-end和grid-column-end可以省略。进一步缩写为：

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

1
2
3
4
5
6
7
8
9
10
11
12
.box1 {
   grid-area: 1 / 1 / 4 / 2;
}
.box2 {
   grid-area: 1 / 3 / 3 / 4;
}
.box3 {
   grid-area: 1 / 2 / 2 / 3;
}
.box4 {
   grid-area: 3 / 2 / 4 / 4;
}

image_1bo1o7jn6os8k001geffb2obd5e.png-6kB

线条可以被命名然后网格使用 grid-area或者grid-column/row-start/end来定位。

Grid Cells

网格系统的最小单元，
image_1bo1mbvobrcm7ufoonb8g1m1247.png-5.4kB

Grid areas

网格内容跨越多行多列时，成为网格区域。
image_1bo1mc4161b8adh4ioi10ofvoo4k.png-5.5kB

Gutters

沟槽，网格之间的缝隙grid-column-gap和grid-row-gap。简写为grid-gap:grid-row-gap grid-column-gap;

span关键词

在行列定位时拓展宽度或者高度 grid-row: 1 / span 3;=grid-row: span 3 / 4;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box1 {
   grid-column: 1;
   grid-row: 1 / span 3;
} 
.box2 {
   grid-column: 3;
   grid-row: 1 / span 2;
}
.box3 {
   grid-column: 2;
   grid-row: 1;
}
.box4 {
   grid-column: 2 / span 2;
   grid-row: 3;
}

image_1bo1o7jn6os8k001geffb2obd5e.png-6kB

grid-template-areas

1
2
3
4
5
6
<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      ".  .  .  ft   ft   ft   ft   ft   ft";
}

image_1bo1p8n3t1hv7uqj1pl8t4al9f6b.png-7kB
简写为：

1
grid-template: grid-template-areas grid-template-rows / grid-template-columns
1
2
3
4
5
6
7
8
.wrapper {
    display: grid;
    grid-template: 
      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
      "sd sd sd main main main main main main" minmax(100px, auto)
      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;           
}

grid-auto-flow

Grid布局中出现gap或者乱序时，一般按照宽松的原则按顺序进行排序；设置为grid-auto-flow: dense;能够切换成紧密布局。
image_1bo1rbblc13ts15o4qdh1ucpu9u6o.png-13kB
image_1bo1rbtotl161rsd1mh9uvj1s3e75.png-11.9kB

grid对齐方式

块/列轴与内联/行轴
image_1bo1s8palc0b1pkr1j1uf432jr7i.png-21.3kB
image_1bo1s8u34jspore1op9cr6e2j7v.png-17.3kB
网格容器可设置align-items属性，可选值有auto normal start end center stretch baseline first baseline last baseline。
网格元素可设置align-self 属性。
align-items align-self是对列轴进行对齐的，justify-items justify-self则能够对行轴进行对齐。

如果网格容器大于网格内容，可使用align-content justify-content进行对齐。
image_1bo1srba518vvk0u1jg19n61ks18c.png-9.5kB

1
align-content: end;

则布局变为：
image_1bo1surlo3ra1a9hoto17g91ftqa9.png-9.5kB

z-index

布局中出现层叠时，用z-index控制z轴显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 2;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

image_1bo1n0m081bnf19op6ac1l50qh351.png-6.5kB

网格方向

writing-mode控制整体的方向，包括文字网格等
direction控制显示方向

嵌套网格

嵌套网格是不继承属性的，且需要保证父网格有足够的面积容纳子网格。

Subgrid

目前浏览器还没有实现

网格布局的响应式设计

image_1bo1ui1701vmabths4kap41hmuam.png-85.9kB
实现上述响应式布局，用两种方式。一种是grid-template-areas来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="wrapper">
<header class="main-head">The header</header>
<nav class="main-nav">
  <ul>
    <li><a href="">Nav 1</a></li>
    <li><a href="">Nav 2</a></li>
    <li><a href="">Nav 3</a></li>
  </ul>
</nav>
<article class="content">
  <h1>Main article area</h1>
  <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column
    layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
</article>
<aside class="side">Sidebar</aside>
<div class="ad">Advertising</div>
<footer class="main-footer">The footer</footer>
</div>
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
53
54
55
56
57
58
59
60
61
62
63
.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
}
.main-nav {
  grid-area: nav;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}
.wrapper > * {
  border: 2px solid #EB3939;
  border-radius: 2px;
  background: #F1A2A2;
}
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"
   }
   nav ul {
     flex-direction: column;
   }
}

一种是用12列流动布局来实现。

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
53
54
55
56
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
}

.wrapper > * {
  grid-column: col-start / span 12;
  border: 2px solid #EB3939;
  border-radius: 2px;
  background: #F1A2A2;
}

@media (min-width: 500px) {
  
    .side {
      grid-column: col-start / span 3;
      grid-row: 3;
    }
    .ad {
      grid-column: col-start / span 3;
      grid-row: 4;
    }
    .content, .main-footer {
      grid-column: col-start 4 / span 9;
    }
    nav ul {
      display: flex;
      justify-content: space-between;
    }
  }

  @media (min-width: 700px) {
    .main-nav {
      grid-column: col-start / span 2;
      grid-row: 2 / 4;
    }
    .content {
      grid-column: col-start 3 / span 8;
      grid-row: 2 / 4;
    }
    .side {
      grid-column: col-start 11 / span 2;
      grid-row: 2;
    }
    .ad {
      grid-column: col-start 11 / span 2;
      grid-row: 3;
    }
    .main-footer {
      grid-column: col-start / span 12;
    }
    nav ul {
      flex-direction: column;
    }
  }