CSS教程：网格布局（grid-template-columns、fr单位）-马育民老师

# 说明

css可以实现像 `table` 标签那样的 **网格布局**

[![](/upload/0/0/1IX7TfjhD4tE.jpg)](/upload/0/0/1IX7TfjhD4tE.jpg)

# 实现

### HTML代码

是普通的 `div` 布局

```
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

```

### display 属性

当一个 HTML 元素将 `display` 属性设置为 `grid` 或 `inline-grid` 后，就变成 **网格容器**，这个元素的所有直接子元素成为网格元素（即：单元格）

```
.grid-container {
  display: grid;
}
```

或

```
.grid-container {
  display: inline-grid;
}
```

### grid-template-columns 属性

通过 `grid-template-columns` 属性设置 网格的 **列的数量**

```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ; /*2列，且两列宽度相同*/
}
```

### fr 单位

网格使用 `fr` 单位定义网格。一个 `fr` 单位代表网格容器中可用空间的 **一等份**。

下面代码定义2列，第2列宽度是第1列宽度的2倍：
```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr ;
}
```

### background-color 属性

```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格背景色*/
}
```

### 设置单元格样式

通过设置 `div` 的样式，达到设置单元格的效果

如：背景色、文字水平居中，行高

**注意：**此时 **网格背景色不显示**，因为被单元格盖住了

```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格背景色*/
}

.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}
```

### padding 属性

设置网格内边距，实现网格外边框效果

```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格颜色*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
}

### grid-gap 属性

设置 单元格间距，实现网格 内边距 效果

```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格颜色*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
  grid-gap: 1px; /*单元格间距，实现网格内部边框效果*/
}

### 完整样式

```
<style>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格颜色*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
  grid-gap: 1px; /*单元格间距，实现网格内部边框效果*/
}

.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}
</style>
```

# 网格线

列与列，行与行之间的交接处就是网格线。

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素

[![](/upload/0/0/1IX7Tgxpicpz.png)](/upload/0/0/1IX7Tgxpicpz.png)

### 跨列

通过 `grid-column-start` 和 `grid-column-end` 属性设置

[![](/upload/0/0/1IX7TgzXmAj6.jpg)](/upload/0/0/1IX7TgzXmAj6.jpg)

#### 关键代码

```
.cell_1{
  grid-column-start: 1;
  grid-column-end: 3;
}
```

#### 完整代码

```
<style>

.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}

.cell_1{
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
```

```
<div class="grid-container">
  <div class='cell_1'>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div class='cell_1'>6</div>
</div>
```

# 其他属性

### grid-template-rows 属性

设置行高

**提示：**使用较少

```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: 50px 70px 90px;
  background-color: #2196F3; /*设置网格颜色*/
  grid-gap: 1px; /*单元格间距，实现网格内部边框效果*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
}
```

# 属性列表

下面属性详见：
https://www.runoob.com/css3/css-grid.html

|CSS|网格属性|
|---|---|
|属性|描述|
|column-gap|指定列之间的间隙|
|gap|row-gap 和 column-gap 的简写属性|
|grid|grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性|
|grid-area|指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性|
|grid-auto-columns|指的默认的列尺寸|
|grid-auto-flow|指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。|
|grid-auto-rows|指的默认的行尺寸|
|grid-column|grid-column-start 和 grid-column-end 的简写属性|
|grid-column-end|指定网格元素列的结束位置|
|grid-column-gap|指定网格元素的间距大小|
|grid-column-start|指定网格元素列的开始位置|
|grid-gap|grid-row-gap 和 grid-column-gap 的简写属性|
|grid-row|grid-row-start 和 grid-row-end 的简写属性|
|grid-row-end|指定网格元素行的结束位置|
|grid-row-gap|指定网格元素的行间距|
|grid-row-start|指定网格元素行的开始位置|
|grid-template|grid-template-rows, grid-template-columns 和 grid-areas 的简写属性|
|grid-template-areas|指定如何显示行和列，使用命名的网格元素|
|grid-template-columns|指定列的大小，以及网格布局中设置列的数量|
|grid-template-rows|指定网格布局中行的大小|
|row-gap|指定两个行之间的间距|

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

原文出处：http://www.malaoshi.top/show_1IX7TgspULjo.html