grid栅格布局

发布时间：2020-12-24 11:04:56 所属栏目：资源来源：网络整理

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

副标题[/!--empirenews.page--]

之前用来布局的方法：

1、table布局

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

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

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

grid栅格布局

声明容器

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栅格布局

控制项目

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

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

注意：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定义网格时，网格线可以被命名。网格线名称也可以设置网格项目位置

（编辑：好传媒网）

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

1/3

尾页