参考地址 https://www.runoob.com/css3/css-grid.html

布局

使用 area 指定分配区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
1
2
3
4
5
6
7
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

效果：
截图

跨列（合并）

1
2
3
4
5
6
7
8
9
10
11
12
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.item8 {
  /**子集使用**/
  grid-area: 2 / 1 / span 2 / span 3;
}

效果:

截图

高度设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }

.grid-container {
  display: grid;
  grid-auto-rows: 150px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
1
2
3
4
5
6
7
8
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

效果:

截图

默认列宽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
1
2
3
4
5
6
7
8
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

效果：

截图

分配列

1
2
3
4
5
6
7
8
9
10
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.item1 {
  grid-column: 1 / 5;
}
1
2
3
4
5
6
7
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  ...
</div>

截图

间隔

用法： grid-gap: grid-row-gap grid-column-gap; 类似于padding 。

1
2
3
4
5
6
7
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px 10px;
  background-color: #2196F3;
  padding: 10px;
}
1
2
3
4
5
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  ...
</div>

效果:

截图

实际项目中使用的

grid-template 属性用于网格布局，设置网格中行、列与分区。

grid-template 是以下属性的简写形式：

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
1
2
3
4
5
6
7
8
9
10
11
12
13
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template:
  'myArea myArea . . .'
  'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
1
2
3
4
5
6
7
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  ...
</div>

效果：

截图

高度

1
2
3
4
5
6
7
8
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 100px 300px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
1
2
3
4
5
6
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  ...
</div>

效果:

截图

宽度

1
2
3
4
5
6
7
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
1
2
3
4
5
6
7
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  ...
</div>

效果:

截图