CSS Grid基于网格的二维布局系统(详细教程)

前言

Grid布局方式借鉴了平面装帧设计中的格线系统，将格线运用在屏幕上，而不再是单一的静态页面，可以称之为真正的栅格。本文将详细介绍grid布局

布局历史

对于Web开发者来说，网页布局一直是个比较重要的问题。但实际上，在网页开发很长的一段时间当中，我们甚至没有一个比较完整的布局模块。总的来说 Web 布局经历了以下四个阶段：
1、table表格布局，通过 Dreamweaver 拖拽表格或者手写 table 标签布局
2、float浮动及position定位布局，借助元素元素盒模型本身的特性以及 float position 等属性等进行布局
3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点 排列方向、对齐方式，自适应尺寸。是目前最为成熟和强大的布局方案
4、grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局

Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷
与flex分为伸缩容器和伸缩项目类似，grid也分为网格容器和网格项目

gird

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

基本概念

容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div class="grid-box">
    <div class="grid-main">
        <div class="grid-item">item1</div>
        <div class="grid-item">item2</div>
        <div class="grid-item">item3</div>
    </div>
</div>

grid-main : grid 容器
grid-item : 项目

目前已经越来越多浏览器开始兼容grid布局了。

点击查看兼容

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

网格容器

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。

display 属性

通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目（grid item）

display: grid
display: inline-grid

效果展示：

item1

item2

item3

item4

还原

display

grid
inline-grid

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

grid-template-columns 属性定义每一列的列宽；grid-template-rows 属性定义每一行的行高

// item1和item2具有固定的高，分别为60px和40px。因为只定义了两个行的高度值，所以item3和item4的高度是根据其自身的内容来定义。
grid-template-rows: 60px 40px 

// 因为grid-template-columns只定义了三列的大小，它们也分别放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3宽度。
grid-template-columns: 40px 50px 60px 

效果展示

item1

item2

item3

item4

还原

display

grid
inline-grid

grid-template-rows(改变行高)

40px 60px
60px 40px

grid-template-columns(改变列宽)

40px 50px 60px
60px 40px

fr

fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

// 网格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是网格容器宽度的四分之一。所以item1和item2的宽度是网格容器的四分之一宽，item3是网格容器宽度的四分之二（2fr）
grid-template-columns: 1fr 1fr 2fr

// 当fr和其它长度单位的值结合在一起的时候，fr是基于网格容器可用空间来计算。
// 网格容器可用空间是网格宽度减去3rem和25%剩下的宽度，而fr就是基于这个尺寸计算：
grid-template-columns: 3rem 25% 1fr 2fr // 1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3

效果展示

item1

item2

item3

item4

还原

display

grid
inline-grid

grid-template-rows(改变行高)

40px 60px
60px 40px

grid-template-columns(改变列宽)

1fr 1fr 2fr
3rem 25% 1fr 2fr

minmax()

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

grid-template-rows: minmax(100px, auto); // 第一行的高度最小值是100px，但其最大值为auto，允许行的高度可以变大超过100px。
grid-template-columns: minmax(auto, 50%) 1fr 3em; // 第一列设置了最小值为auto，但它的最大值是50%，也就是列的最大宽度不会超过网格容器宽度的50%

效果演示

item1

item2

item3

item4

还原

display

grid
inline-grid

grid-template-rows(改变行高)

1fr 1fr 2fr
minmax(100px, auto)

grid-template-columns(改变列宽)

1fr 1fr 2fr
minmax(auto, 50%) 1fr 3em

repeat()

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

grid-template-rows: repeat(3, 1fr);    

// 第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30px - 30px) / 3）
grid-template-columns: 30px repeat(3, 1fr) 30px;

效果演示：

item1

item2

item3

item4

item5

还原

display

grid
inline-grid

grid-template-rows(改变行高)

1fr 1fr 2fr
repeat(3, 1fr)

grid-template-columns(改变列宽)

1fr 1fr 2fr
30px repeat(3, 1fr) 30px

间距

【grid-column-gap】创建列与列之间的间距

【grid-row-gap】创建行与行之间的间距

【grid-gap】默认值为0

grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同

[注意]grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距
间距(Gap)可以设置任何非负值，长度值可以是px、%、em等单位值

效果演示

item1

item2

item3

item4

item5

还原

display

grid inline-grid

grid-template-rows(改变行高)

1fr 1fr 2fr repeat(3, 1fr)

grid-template-columns(改变列宽)

1fr 1fr 2fr 30px repeat(3, 1fr) 30px

grid-gap(行与行，列与列的间距)

0 10px 10px 20px

以上是设置在容器上的属性和值，下面介绍设置在项目上的属性和值

---

网格项目 item

网格线

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

【grid-row-start】上边框所在的水平网格线

【grid-row-end】下边框所在的水平网格线

【grid-column-start】左边框所在的垂直网格线

【grid-column-end】右边框所在的垂直网格线

默认值为 auto

通俗来讲就是“一个网格”其实位置和结束位置

.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
上面代码指定，item1项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

效果演示：

【grid-column】 grid-column是grid-column-start和grid-column-end的简写。
【grid-row】 grid-row是grid-row-start和grid-row-end的简写。

默认值为auto

如果只提供一个值，则指定了grid-row-start(grid-column-start)值；如果提供两个值，第一个值是grid-row-start(grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，两者之间必须要用/隔开

【span】
关键词span后面紧随数字，表示合并多少个列或行

效果展示

item1

item2

item3

item4

item5

还原

display

grid
inline-grid

grid-template-rows(改变行高)

1fr 1fr
repeat(3, 1fr)

grid-template-columns(改变列宽)

1fr 1fr 1fr
30px repeat(3, 1fr) 30px

【item1】grid-row

auto
2
3
2 / 4
1 / span 3

【item1】grid-column

auto
2
3
2 / 4
span 3

【grid-area】
如果指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end

item1

item2

item3

item4

item5

还原

display

grid inline-grid

grid-template-rows(改变行高)

1fr 1fr repeat(3, 1fr)

grid-template-columns(改变列宽)

1fr 1fr 1fr 30px repeat(3, 1fr) 30px

【item1】grid-area

auto 1 / 1 / 2 / 2 2 / 3 / 3 / 4 2 / 4

网格线命名

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格区域命名

【grid-template-areas】
像网格线名称一样，网格区域的名称可以使用grid-template-areas属性来命名。引用网格区域名称也可以设置网格项目位置

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;
grid-template-columns: 1fr 200px;

设置网格区域的名称应该放置在单引号或双引号内，每个名称由一个空格符分开。网格区域的名称，每组（单引号或双引号内的网格区域名称）定义了网格的一行，每个网格区域名称定义网格的一列

[注意]grid-template-areas: "header header" "content sidebar" "footer footer";不可以简写为grid-template-areas: "header" "content sidebar" "footer";

效果展示

item1

item2

item3

item4

item5

还原

display

grid
inline-grid

grid-template-areas

none
"header header" "content sidebar" "footer footer"

【item1】grid-area

auto
header
footer
content
sidebar

隐式网格

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

效果展示：

item1

item2

item3

item4

item5

还原

display

grid
inline-grid

grid-auto-flow

row
column

【grid-auto-rows】
【grid-auto-columns】

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行。所以grid-auto-rows会作用于item8，请手动操作下

item1

item2

item3

item4

item5

item6

item7

item8

item9

还原

display

grid
inline-grid

grid-template-columns

none
100px 100px 100px

grid-template-rows

none
100px 100px 100px

grid-auto-rows

auto
50px

grid-row(item8)

auto
4

grid-column(item8)

auto
2

网格项目层级

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

.item-1,.item-2 {
    grid-row-start:  1;
    grid-column-end: span 2;
}
.item-1 { 
    grid-column-start: 1; 
    z-index: 1; 
}
.item-2 { 
    grid-column-start: 2 
}

在这个例子中，item1和item2的开始行都是1，item1列的开始是1，item2列的开始是2，并且它们都跨越两列。两个网格项目都是由网格线数字定位，结果这两个网格项目重叠了。

默认情况下，item2在item1上面，但是，我们在item1中设置了z-index:1;，导致item1在item2之上

效果展示：通过控制z-index的值，可以看得出item1 和 item2的层级关系

item1

item2

item3

item4

item5

还原

display

grid
inline-grid

grid-template-columns

none
1fr 1fr

grid-template-rows

none
1fr 1fr

【item1】grid-area

auto
1 / 1 / 3 / 3

【item1】z-index

auto
1

【item2】grid-area

auto
2 / 2 / 4 / 4

对齐

【justify-items】
【justify-self】
【align-items】
【align-self】

justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。

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

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

这四个属性主要接受以下属性值：auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

效果展示：

item1

item2

item3

item4

item5

还原

display

grid inline-grid

grid-template-columns

none 3fr 1fr

grid-template-rows

none 3fr 1fr

justify-items

normal start end center stretch baseline

align-items

normal start end center stretch baseline

【item1】justify-self

normal start end center stretch baseline

【item1】align-self

normal start end center stretch baseline

综合效果来看，都是在网格线内进行移动的对齐的。

【align-content】属性是整个内容区域的垂直位置（上中下）
【justify-content】属性是整个内容区域在容器里面的水平位置（左中右）

支持的属性值

normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline

效果演示：

item1

item2

item3

item4

item5

还原

display

grid
inline-grid

grid-template-columns

none
40px 80px

grid-template-rows

none
50px 30px 80px

justify-content

normal
start
end
center
stretch
baseline
space-around
space-between
space-evenly

align-content

normal
start
end
center
stretch
baseline
space-around
space-between
space-evenly

小结

grid的属性和值是非常的多，初看一遍感觉很难懂，但是仔细按照例子操作下会发现grid是非常强大的布局系统的。赶快用起来把！

转载于:https://www.cnblogs.com/shiyou00/p/10608052.html