如何更容易地快速学会网格布局？CSS Grid Layout基本设置入门教程详解（一）

一、引言

CSS网格布局（CSS Grid Layout）已逐渐在前端设计中，显露出它的强大用处。该二维布局系统类似boostrap中的栅格布局系统，相对来说CSS的网格系统更强大，更可控，可以从水平方向和垂直方向调整网格的大小、对齐方式、间隔等。它的使用和flex布局类似，是flex之后最好的布局系统了，它可以让你快速搭建好基本的界面，而不用担心各种奇异的问题。

二、Grid网格布局和其它布局有什么不同？

1、table布局

1）布局在做诸如表格的时候是比较合适的，但是多数时候并不推荐使用这种布局；

2）Table布局第一大问题就是会造成页面延迟渲染，造成资源损耗；

3）另一个问题就是table的标签没有语义化，td还是tr一时还分不清，对前端设计和后端设计都不太友好。

2、float布局

float布局在实际使用中，关于元素清除浮动的问题还是要仔细设计，在排版方面还是挺好的。

3、position布局

CSS的这个position属性用起来没那么顺手，简单的relative和absolute有时都要调试很久，而且兼容性也不好，尽量少用。

4、flex布局

flex弹性布局比较容易上手，而且实现效果也比较简便，flex主要解决一维布局的问题。

5、Grid网格布局

Grid网格布局是二维布局系统，在水平和垂直方向更自由地控制元素，可以和flex配合使用。

三、WEB浏览器和移动设备支持

随着Grid布局规范的更新，多数浏览器都提供了Grid Layout的支持，微软的IE10-11提供的是过时的实现（IE总是不按套路出牌）。Grid网格布局是CSS布局的未来，配合Flex和媒体查询，实现更健壮和强大的响应式网页。

四、Grid网站布局实例快速预览

五、Grid网格布局基本概念

在深入学习Grid网格布局前，我们需要了解一下Grid中的几个重要概念，布局设计中都需要依据这些概念。

1、Grid Line（网格线）：上图中水平和垂直的线，成为网格线，布局中，网格线的用处是设置间隔距离；

2、GridTrack（网格轨道）：相邻两条水平网格，或相邻两条垂直线之间的空间，称为网格轨道；

3、Grid Cell（网格单元）：相邻两条水平线，和相邻两条垂直线相交构成的空间，称为单元格。如图红色块，单独占据一个单元格，Grid Item（网格子元素）和网格单元相似；

4、Grid Container（网格容器）：网格容器容纳所有网格单元，如上图，蓝色框的就是一个网格容器，我们主要是在该容器上进行布局；

5、Grid Area（网格区域）：任意4条网格线围起来的空间，网格区域的面积大于或等于网格单元格。

另外，因为Grid网格布局是二维布局，所以很有必要有个轴线方向的概念，默认情况下：界面的坐标原点在左上角，X方向水平向右，Y方向水平向下。轴线方向可以让你在布局中更有方向感。

六、Grid网格布局设置细节详解

布局主要分为两部分：容器布局和单元格布局。器布局是对容器和单元格的总体设置，单元格布局是对其自身的单独设置。

1、容器布局

1）定义网格容器

.container{
    display: grid;
}

以上代码创建了一个新的网格容器，display有两个可选值：

1）grid：创建块级网格容器

2）inline-grid：创建内联网格容器。

2）设置网格轨道大小（Grid-template-columns、grid-template-rows）

网格轨道分为列方向的轨道（水平方向），和行方向的轨道（垂直方向）。列的英语是column，行的英语是row。当我们确定这两个方向的轨道的大小，也就确定了一个单元格，如下：

.container{
    display: grid;
    grid-template-columns: 200px 200px 200px 200px 200px;
    grid-template-rows: 52px;
    grid-column-gap: 20px;
}

Grid-template-columns、grid-template-rows，用于设置行列的网格轨道的大小和个数，上面代码中5个200px的意思，就是：平方向5个元素，每个元素的宽度（即轨道大小）为200px。两个方向的设置规则一样。

Grid-column-gap用于指定列方向单元格的间隔，gap是间隔的意思。

对于以上代码你可以使用repeat简化写法，另外若需要使用自适应宽度可以使用fr单位：

.container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 52px;
    grid-column-gap: 20px;
}

完整语法如下：

.container {
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

Track-size：网格轨道大小；

Line-name：网格线的名称，自定义。

可参考以下写法：

.container{
    display: grid;
    grid-template-columns: [line-start] repeat(5, 1fr) [line-01] 200px [line-end];
    grid-template-rows: [line-02] 52px [line-03];
    grid-column-gap: 20px;
}

3）设置网格区域（grid-template-areas）

Grid使用一组或几组字符串对网格区域命名，对网格容器进行划分。一组字符串表示一行的网格区域，每一组的字符串名称数量都必须相同，语法如下：

.container {
    grid-template-areas:
            "<grid-area-name> | . | none | ..."
            "...";
}

Grid-area-name：自定义的区域名称字符串；

. ：表示一个空网格单元，当你在某位置想留空时你可以使用点；

None：不使用网格区域。

另外，一般设置网格区域后，需要通过子元素的属性grid-area，指向所属的网格区域。

例子：

.container{
    display: grid;
    grid-template-columns: auto 35% 15% auto;
    grid-template-rows: auto;
    grid-template-areas:
        ". head head ."
        ". post sidebar .";
}

.container .head{
    grid-area: head;
    height: 60px;
}

.container .post{
    grid-area: post;
    height: 500px;
}

.container .sidebar{
    grid-area: sidebar;
    height: 500px;
}

使用简写形式grid-template

Grid-template属性是grid-template-rows、grid-template-columns、grid-template-areas的简写属性，语法如下：

.container {
    grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

4）设置网格线大小

网格线大小即行列单元格之间的间隔大小，使用grid-column-gap、grid-row-gap设置。

.container {
    grid-column-gap: <line-size>;
    grid-row-gap: <line-size>;
}

5）设置网格子元素对齐方式

justify-items设置元素在行轴线方向的对齐方式，align-items设置元素在列轴线方向的对齐方式，具体的还需要自己亲自写代码调试，因为下面还有一种对齐方式设置，容易搞混。

两个属性的可选值：

Start：将网格元素对齐到起始处；

End：将网格元素对齐到结束出

Center，（垂直）水平居中元素；

Stretch：填充单元格大小。

简写形式place-items

Justify-items和align-items的简写形式：

.container {
    place-items: <align-items> <justify-items>;
}

6）设置网格单元格对齐方式

Justify-content：设置网格沿着行轴线方向的对齐方式

Align-content：设置网格沿着列轴线方向的对齐方式。

Place-content：<align-content> <justify-content>，简写形式。

Justify-content和align-content的可选属性值如下：

Start：网格对齐到开始处；

End：网格对齐到结束处；

Center：居中对齐；

Stretch：自动填充单元格；

Space-around：两端放置一半空间，中间空间均匀；

Space-between：靠两端对齐，中间空间均匀；

Space-evenly：两端空间均匀，中间均匀；

7）其它设置

自动生成网格轨道的设置

当网格项过多时，Grid会自动生成隐式轨道，你可以自定义指定，隐式轨道的大小：

.container {
    grid-auto-columns: <track-size> ...;
    grid-auto-rows: <track-size> ...;
}

Track-size即隐式轨道的大小。

设置自动放置网格项的方式

.container {
    grid-auto-flow: row | column | row dense | column dense
}

Row：自动填充每行；

Column：自动填充每列；

Dense：尝试使用已存在的网格填充。

简写形式Grid

Grid属性是grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow的简写形式，举例：

.container {
    grid: [line01-start] ". head head" 1fr [line01-end]
    [line02-start] "footer footer footer" 25px [line02-end]
    / auto 50px auto;
}

2、网格单元格

1）设置网格单元格大小

网格项默认占据一个轨道，单元格的大小主要通过指定网格项的开始位置和结束位置，设置网格项的大小

主要语法如下：

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

Line：网格线名；

Number：网格轨道数量；

Name：网格名；

Auto：自动。

简写形式：grid-column、grid-row：

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

2）设置网格所属区域

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

3）网格单元格的对齐方式

Justify-self：单元格沿着行轴线的对齐方式

.item {
    justify-self: start | end | center | stretch;
}

Align-self：单元格沿着列轴线的对齐方式

.item{
    align-self: start | end | center | stretch;
}

简写形式place-self：<align-self> <justify-self>

七、完整示例源码

github立即吃瓜：https://github.com/onnple/grid_layout

八、结语

Grid网格布局是非常灵活强大的，其使用习惯和flex类似，只不过flex只能确定单一的主轴线方向。Flex布局和Grid布局是前端设计师必备的技能，在众多的页面设计中，掌握CSS的核心布局元素有利于你在开发的道路上走得更远！