如何更容易地快速学会网格布局（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
八、结语【如何更容易地快速学会网格布局（CSS Grid Layout基本设置入门教程详解（一））】Grid网格布局是非常灵活强大的，其使用习惯和flex类似，只不过flex只能确定单一的主轴线方向。Flex布局和Grid布局是前端设计师必备的技能，在众多的页面设计中，掌握CSS的核心布局元素有利于你在开发的道路上走得更远！