grid栅格布局

发布时间：2020-12-14 23:58:58 所属栏目：资源来源：网络整理

导读：之前用来布局的方法： 1、table布局 2、float浮动及 position定位布局，需要考虑对其他元素的影响 3、flex弹性盒模型布局，可以解决排列方向，对齐方式，自适应尺寸的问题现在学习一种新的布局方法：Grid布局，网格布局。是基于二维网格的布局系统，网格内

之前用来布局的方法：

1、table布局

2、float浮动及 position定位布局，需要考虑对其他元素的影响

3、flex弹性盒模型布局，可以解决排列方向，对齐方式，自适应尺寸的问题

现在学习一种新的布局方法：Grid布局，网格布局。是基于二维网格的布局系统，网格内部是一个格一个格的。和flex布局一样也分容器属性和项目属性。

声明容器

display: grid; 块级网格

display: inline-grid; 行内块级网格

display: subgrid; 定义子网格，子网格会继承父网格的一系列规格

grid-template-columns: 60px 60px 60px 60px; 用来定义网格列的宽度即轨道宽度，代码表示将容器划分为4列，列的宽度都是60px，宽度可以随意的更改。

grid-template-rows: 60px 60px 60px 60px; 用来定义网格行的高度，代码表示将容器划分为4个行。通过以上两行代码就实现了一个4*4的网格划分了。

grid-gap: 5px; 默认值为0，用来控制网格的间距，准确地说是用来控制网格区域的间距。是grid-row-gap和grid-column-gap两个属性的缩写。

注：grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距。可设任何非负值，px、%、em等单位均可。

html:

css

-template--template-->--column-start: -row-start: -column-start: -column-end: -row-start: -row-end: -column: - / --row: / -column: / span ; -row: - / -; -area: - / / - / -area: - / / - /

控制项目

和用来控制区域的列开始和行开始的位置;

和用来控制区域结束位置;

注意：grid-column-start、grid-column-end、grid-row-start、grid-row-end的值都可以取负数，负数意味着从后往前数。

-column-start: -column-end: -row-start: -row-end:

是grid-column-start和grid-column-end的简写;

是grid-row-start和grid-row-end的简写;

-column: - / --row: / -column-start: --column-end: --row-start: -row-end:

: 关键词span后面紧随数字，表示横跨几个单元格。

-column: / span

</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt; 2 </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;
grid</span>-column: span <span style="color: #800080"&gt;2</span> / <span style="color: #800080"&gt;3</span><span style="color: #000000"&gt;;

</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt; 3 </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;
grid</span>-column-start: <span style="color: #800080"&gt;1</span><span style="color: #000000"&gt;;
grid</span>-column-end: span <span style="color: #800080"&gt;2</span><span style="color: #000000"&gt;;

</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt; 4 </span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;
grid</span>-column-start: span <span style="color: #800080"&gt;2</span><span style="color: #000000"&gt;;
grid</span>-column-end: <span style="color: #800080"&gt;3</span><span style="color: #000000"&gt;;
</span><span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;row 也一样的</span><span style="color: #008000"&gt;*/</span><span style="color: #000000"&gt;
grid</span>-row: -<span style="color: #800080"&gt;1</span> / -<span style="color: #800080"&gt;3</span><span style="color: #000000"&gt;;

}

是grid-row和grid-column的简写。顺序是grid-row-start,grid-column-start,grid-row-end,grid-column-end

-area: - / / - / -row-start: --row-end: --column-start: -column-end:

单位

: fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间

grid-template-columns: 1fr 1fr 2fr;

该示例中，网格容器分成了4（1+1+2=4）等份，每一份1fr=网格宽度/4

grid-template-columns: 3rem % 1fr 2fr;

当fr和其他长度单位的值结合在一起时，fr是基于网格容器可用空间来计算的。该示例中

1fr = (网格宽度 - 3rem - 网格宽度 * %) /

可用函数

可以通过这个函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值，auto值允许网格轨道基于内容的尺寸拉伸或挤压

-template--template-columns: minmax(auto,%) 1fr 3em;

使用repeat()函数可以创建重复的网格轨道。用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个定义网格轨道应该重复的次数，第二个定义每个轨道的尺寸。

-template-rows: repeat(-template-columns: 30px repeat(,1fr) 30px;

网格线命名

通过grid-template-rows和grid-template-columns定义网格时，网格线可以被命名。网格线名称也可以设置网格项目位置

分配网格线名称必须用放括号，然后后面紧跟网格轨道的尺寸值。定义网格线名称时需要避免使用规范中出现的关键词，以免导致混乱。

grid-template-rows: [row--start] 1fr [row--start] 1fr [row--end]; grid-template-columns: [col--start] 1fr [col--start] 1fr [col--start] 1fr [col--end];

使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似，引用网格线名称的时候不应该带方括号

使用repeat()函数可以给网格线分配相同的名称。相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符。

grid-template-rows: repeat(,[row-start] 1fr [row--template-columns: repeat(,[col-start] 1fr [col-end]);

隐式网格

网格默认方向是row,可以通过grid-auto-flow属性把网格流的方向改变成column

: column

当网格项目确认在显示网格之外时就会创建隐性网格，当没有足够的空间或者显示的网格轨道来设置网格项目，此时网格项目就会自动创建隐式网格。

和属性可以定义隐式的网格，默认值auto

网格项目层级

网格项目可以具有层级和堆栈，必要时可能通过属性来指定

对齐

网格项目对齐方式

和指定网格项目沿着行轴对齐方式; 和指定网格项目沿着列轴对齐方式。

justify-items和align-items应用在网格容器上

justify-self和align-self应用于网格项目自身对齐方式

这四个属性主要接受以下属性值：

auto、normal、start、 end、 center、 stretch、 baseline、 first baseline、 last baseline

网格轨道对齐方式

指定网格轨道沿着行轴对齐方式;

指定网格轨道沿着列轴对齐方式。它们支持下面的属性：

normal、 start、 end、 center、 stretch、

space-around、 space-between、 space-evenly、 baseling、

first baseline、 last baseline

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!