功能最强大的布局（兼容性不怎么好，未来会逐渐完善）

教程（来自CSS Tricks):

先了解：
容器：container ; 项目：items

语法

写法：如何让一个元素变成flex容器：

.container{
   display: grid / inline-grid;
}
复制代码

grid container有哪些属性、以下都是样式

行和列：grid-template-columns、grid-template-rows

设置行列范围：

js.jirengu.com/mowewuqati/…

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
  </div>

</body>
</html>
复制代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
.container{
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 100px 300px 100px;
  border: 1px solid red;
}
.a,.b,.c{
  border: 1px solid blue;
}
.a{
  grid-row-start: 1;               **行从第一根线到第二根**
  grid-row-end: 2;
  grid-column-start: 1;            **列从第一根线到第六根**
  grid-column-end: 6;
  
}
.b{
  grid-column-start: 1;
  grid-column-end: 3;
}
.c{
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 5;
  
}
复制代码

效果如下：

取名

fr的用法（用来做平均布局）

用法：
js.jirengu.com/begenaboge/…

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
  
</div>
</body>
</html>
复制代码

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}


/*fr表示一份*/
.container {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid red;
  min-height: 400px;
}

.container > div {
  border: 1px solid green;
}

.e {
  grid-column-start: 2;
  grid-column-end: 4;
}
复制代码

效果如下：

平均布局：用fr来实现平均布局，就不在需要写负Margin了
js.jirengu.com/lixiweveza/…

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>
</body>
</html>
复制代码

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

.container {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid red;
  min-height: 400px;
  width: 800px;
  grid-gap: 12px;                           **每个图片左右上下之间相隔**12px
}

.image {
  width: 191px;
  height: 191px;
  border: 1px solid green;
}
复制代码