grid栅格布局

发布时间：2020-12-24 09:09 所属栏目：34 来源：网络整理

导读：

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

之前用来布局的方法：

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

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

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];

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

（编辑：ASP站长网）