html栅格 像素,grid-css栅格布局

还记得五子棋棋盘吗？

> 我认为：grid布局就是将需要分割排列的容器变成一张由一个个小格子组成的棋盘，从左上角开始以(1，1)为原点向右、向下延伸，在grid布局中，你最常见的单词便是row和column，分别代表行与列，可以将其想象为一个特殊的二维坐标轴的横(row)、纵(column)坐标

## 1.父元素 网格容器grid

想使用grid布局的前提便是定义：

~~~

.container {

display: grid | inline-grid | subgrid;

}

~~~

* :grid 会生成一个块级网格

* :inline-grid 会生成一个内联网格

* :subgrid 如果你的网格容器本身是另一个网格的网格项(即嵌套网格)，你可以使用这个属性来表示：你希望它的行/列的大小继承自它的父级网格容器，而不是自己指定的。

## 2.grid-template

**使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。**

~~~

grid-template: 100px 100px 100px / 100px 100px 100px ;

// 简写方式，用于规定初始单个网格的行列数量与行列高低

~~~

例：

~~~

.container {

display: grid;

grid-template: 100px 100px 100px / 100px 100px 100px ;

}

// 这将会使container分割成3行3列，每个栅格的大小都为100px*100px；

~~~

### 2.1grid-template-columns

~~~

// 用于规定容器内有多少列且每列有多宽

.container {

display: grid;

grid-template-columns: 100px 200px 100px 100px;

}

~~~

### 2.2grid-template-rows

~~~

// 用于规定容器内有多少行且每行有多高

.container {

display: grid;

grid-template-rows: 100px 200px 100px 100px;

}

~~~

## 3.grid-gap

**指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。**

> 只能在 列/行 之间创建间距，网格外部边缘不会有这个间距。

~~~

// 简写方式

.container{

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

grid-gap: 10px 15px;

}

~~~

### 3.1grid-column-gap

**列与列之间的间距**

### 3.2grid-row-gap

**行与行之间的间距**

## 4.grid-column、grid-row

用于设置格子的大小与位置

### 4.1grid-column-start,grid-column-end

~~~

格子的列宽(从start到end) start和and均为正整数

可以简写为 grid-column: start / end

~~~

### 4.2grid-row-start，grid-row-end

~~~

格子的行高(从start到end) start和and均为正整数

可以简写为 grid-row: start / end

~~~

> **当grid-column与grid-row只传一个值时代表默认宽高均为一个单位，而传递的那个值会作为定位使用，若传递两个值时长宽的大小等于end-start**

## 5.grid自适应布局

将大小单位改为 fr即可实现

~~~

.container {

display: grid;

grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;

height: 999px;

}

// 这将会使container分割成3行3列，每个栅格的大小都为1/3的总宽*333px；

~~~