grid布局是什么（grid 布局）

grid布局，网格布局，是目前唯一一种CSS二维布局方式，一种新的CSS布局模型，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。号称是最强大的CSS布局方案.

擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

基础知识：
- 容器和项目
- 网格轨道
- 网格单元
- 网格线

举个栗子：演示地址

Grid布局属性可以分为两大类

容器属性
项目属性

display-演示地址

属性值如下：

grid：该容器元素是一个块级元素
inline-grid：该容器元素为行内元素

一旦声明，这个元素的所有直系子元素将成为网格项目。

属性设置列宽
属性设置行高

属性值讲解如下：

固定的列宽和行高

repeat() 函数

可以简化重复的值，该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的

auto-fill 关键字

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。

示例如下：

fr 关键字

fr 单位代表网格中可用空间的一等份。可以帮助我们创建灵活的网格轨道

minmax() 函数 有时候我们想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。

2.1.5 auto 关键字

由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。

属性、属性分别设置行间距和列间距。属性是两者的简写形式。

表示行间距是 10px
表示列间距是 20px
实现的效果是一样的

属性用于定义区域，一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的一起使用，我们在这里一起介绍。属性指定项目放在哪一个区域

上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。

以上代码表示将类所在的元素放在上面中定义的区域中

属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图英文数字的顺序。这个顺序由属性决定，默认值是。

属性值如下：

：表示根据实际情况排列，可能会存在空白等情况
：表示尽可能填满表格，下面存在长度合适的就会去填满上面的空白
：表示先列后行。就是按照顺序竖着排，一列排满就去排第二列，依次l类推

属性设置单元格内容的水平位置（左中右），属性设置单元格的垂直位置（上中下）

下面以 justify-items 属性为例进行讲解，align-items 属性同理，只是方向为垂直方向。它们都有如下属性：

属性值介绍如下：

start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）

属性是整个内容区域在容器里面的水平位置（左中右），属性是整个内容区域的垂直位置（上中下）。它们都有如下的属性值。

下面以 justify-content 属性为例进行讲解，align-content 属性同理，只是方向为垂直方向

属性值介绍如下：

start：对齐容器的起始边框
end：对齐容器的结束边框
center：容器内部居中
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch：项目大小没有指定时，拉伸占据整个网格容器

在讲属性和属性之前，先来看看隐式和显式网格的概念

隐式和显式网格：显式网格包含了你在和属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列

假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据属性和属性设置。它们的写法和和完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线

grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

属性指定项目放在哪一个区域，在上面介绍的时候有提到过，这里不再具体展开

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目

align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

两者很相像，这里只拿 justify-self 属性演示，align-self 属性同理，只是作用于垂直方向。place-self 是设置 align-self 和 justify-self 的简写形式，这里也不重复介绍。

属性值介绍如下：

start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）

fr 实现等分响应式
repeat + auto-fit——固定列宽，改变列数量
repeat+auto-fit+minmax 去掉右侧空白
repeat+auto-fit+minmax-span-dense 解决空缺问题

区别：

flex布局是一维布局。一次只能处理一个维度上的元素布局，一行或者一列
Grid是二维布局。可以同时处理行和列

布局远比布局强大！

参考：最强大的 CSS 布局 —— Grid 布局

grid布局是什么（grid 布局）

相关推荐