Grid布局

Grid布局

概述

Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。
它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至 目前，几乎所有的浏览器都对 CSS
Grid 提供了原生的支持。 Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行

Grid 布局和 flex 布局

flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局， Grid 布局是二维布局。
flex布局一次只能处理一个维度上的元素布局，一行或者一列。
Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

网格布局的属性

1.属性的基本概念：容器（container）——有容器属性
– 项目（items）——有项目属性
– 行（row)
– 列（column）
– 间距（gap) ——单元格之间的距离
– 区域（area）—— 自己划分每个单元格占据的区域
– 内容（content)

2.容器和项目

Grid和flex类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上， 称为项目属性
采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”

 1 2 3

上面的代码中，box就是容器，item就是项目

网格轨道

通过 grid-template-columns 和 grid-template-rows
指定当前容器的行和列后，这里的行和列就是网格轨道。但在实际页面中，由于页面的内容不确定，内容可能会超过
grid-template-columns 和 gridtemplate-rows
指定的网格轨道个数，这个时候网格将会在隐式网格中创建行和列。按照默认，这些轨 道将自动定义尺寸，所以会根据它里面的内容改变尺寸。

网格线

网格线是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右；垂直方向是从上往下。网格线的编号都是从
1 开始的。

容器属性

Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性
声明 display：grid
则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素。
注意，设为网格布局以后，容器子元素（项目）的 float 、 display: inline-block 、 display: table-cell 、 vertical-align 和 column-* 等设置都将失效。

grid-template-columns 属性
grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。
grid-template-columns 属性定义每一列的列宽，
grid-template-rows 属性定义每一行的行高。

固定的列宽和行高

.box { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; /*指定了一个三行三列的网格，列宽和行高都是100px*/}

repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 repeat() 函数，简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是 一样的，我们可以这么去实现，实际效果是一模一样的

.box { display: grid; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%);}

grid-template-columns、grid-template-rows设置的行或者列比较多的时候，可以使用repeat()这个函数简化重复的值

auto-fill 关键字

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格，这时可以使用 auto-fill 关键字表
示自动填充。有的时候，父容器的尺寸是不确定的，我们需要把子元素往父容器中逐个填充，这个时候我们可以利用

auto-fill

不确定容器尺寸下的自动填充： 表示每列宽度 100px ，然后自动填充，直到容器不能放置更多的列

fr 关键字

fr 是单词fraction的缩写，表示分数。

Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。 fr 单位代表网格容器中可 用空间的一等份。
grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

minmax() 函数

我们有时候想给网格元素一个最小和最大的尺寸， minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-templatecolumns: 1fr 1fr
minmax(300px, 2fr)的意思是，第三个列宽最少也是要 300px，但是最大不能大 于第一第二列宽的两倍。

auto 关键字

auto 关键字表示由浏览器自己决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。
grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度。

box { display: grid; grid-template-columns: repeat(auto-fill, 100px);}.box { display: grid; grid-template-columns: 200px 1fr 2fr;} .box { display: grid; grid-template-columns: 1fr 1fr minmax(300px, 2fr); }.box { display: grid; grid-template-columns: 100px auto 100px; }

row-gap 属性

row-gap属性设置行与行的间隔（行间距） row-gap: 10px表示行间距是 10px

column-gap 属性

column-gap属性设置列与列的间隔 column-gap: 20px 表示列间距是 20px

gap 属性

gap属性是column-gap和row-gap的合并简写形式：gap: 10px 20px

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即 先填满第一行，再开始放入第二行 这个顺序由
grid-auto-flow 属性决定，默认值是 row ，即”先行后列”。也可以将它设成 column ，变 成”先列后行”。

justify-items 属性

justify-items 属性设置单元格内容的水平位置（左中右） start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。
center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）

align-items 属性

align-items 属性设置单元格内容的垂直位置（上中下）

place-items 属性

place-items 属性是 align-items 属性和 justify-items 属性的合

并简写形式。

grid-auto-flow: column;.container { justify-items: stretch | start | end | center;}.container { align-items: stretch | start | end | center;}place-items: start end;

justify-content 属性

justify-content 指定了网格元素的水平分布方式。此属性仅在网格总宽度小于grid容器宽度时候有效
果。例如，我们网格设定的都是固定的宽度值，结果还有剩余空间。 语法如下：
stretch：默认值。拉伸，宽度填满grid容器，拉伸效果需要网格目标尺寸设为auto时候才有效，如果定 死了宽度，则无法拉伸。
start：默认值。逻辑CSS属性值，与文档流方向相关。默认表现为左对齐。 end：逻辑CSS属性值，与文档流方向相关。默认表现为右对齐。
center：表现为居中对齐。 space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域
分配。 space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最
终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly：evenly是匀称、平等的意思。也就是视觉上，每个子项两侧空白间距完全相等。

align-content 属性

align-content 属性是整个内容区域的垂直位置（上中下） align-content 可以看成和 justify-content
是相似且对立的属性， justify-content 指明水平方向 grid子项的分布方式，
而 align-content则是指明垂直方向每一行grid元素的分布方式。如果所有grid 子项只有一行，则 align-content 属性是没有任何效果的。
语法如下：

• stretch：

默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是 50%。

start：

逻辑CSS属性值，与文档流方向相关。默认表现为顶部堆砌。 end：逻辑CSS属性值，与文档流方向相关。默认表现为底部堆放。

center：

表现为整体垂直居中对齐。 space-between：表现为上下两行两端对齐。剩下每一行元素等分剩余空间。

space-around：

每一行元素上下都享有独立不重叠的空白空间。 space-evenly：每一行元素都完全上下等分。

 justify-content: stretch | start | end | center | space-between | space-around |space-evenly; align-content: stretch | start | end | center | space-between | space-around |space-evenly;

place-content属性

place-content 是align-content 和 justify-content`属性的缩写。

grid-auto-columns 属性
grid-auto-rows 属性

grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。 指定隐式创建的行轨道大小。
grid-auto-rows ：隐式行的大小。 grid-auto-columns ：隐式列的大小。

项目属性

• grid-column-start 属性
• grid-column-end 属性
• grid-row-start 属性，
• grid-row-end 属性

表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向。

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

这四个属性的值还可以使用 span 关键字，表示”跨越”，即左右边框（上下边框）之间跨越多少个网格。

.container { place-items:/ ;}.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px; }.item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4;}

项目的左边框距离右边框跨越2个网格 使用这四个属性，如果产生了项目的重叠，则使用 z-index 属性指定项目的重叠顺序

grid-column 属性

grid-row 属性
grid-column 属性是 grid-column-start 和grid-column-end
的合并简写形式， grid-row 属性是 grid-row-start 属性和 grid-row-end的合并简写形式。
这两个属性之中，也可以使用 span 关键字，表示跨越多少个网格。 项目 item-1 占据的区域，包括第一行 +第二行、第一列 + 第二列

。

justify-self 属性.item-1 { grid-column-start: span 2;}.item { grid-column:  / ; grid-row:  / ;}.item-1 { grid-column: 1 / 3; grid-row: 1 / 2;}/* 等同于 */.item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;}.item-1 { background: #b03532; grid-column: 1 / 3; grid-row: 1 / 3;}/* 等同于 */.item-1 { background: #b03532; grid-column: 1 / span 2; grid-row: 1 / span 2;}

align-self 属性
place-self 属性

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是 只作用于单个项目。
这两个属性都可以取下面四个值。 place-self属性 place-self 属性是 align-self 属性和justify-self 属性的合并简写形式

.item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch;}start：对齐单元格的起始边缘。end：对齐单元格的结束边缘。center：单元格内部居中。stretch：拉伸，占满单元格的整个宽度（默认值）。