开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
Grid网格布局
Grid布局指的是CSS Grid Layout 。
Grid网格布局是Web布局唯一的一个具有二维布局的布局系统，与过去的Web布局相比，它完全改变了设计用户界面的方式。
什么是网格布局
网格是由一系列水平与垂直的线构成的一种布局方式。你可以在网格的基础上，将设计元素进行排列，帮助你设计一系列具有固定位置以及尺寸的元素的页面，使我们的 Web 页面更加统一。
一个网格有它自己独特的特性和具备的属性，通常一个网格会具有许多列(column)与行(row)，行与列，列与列之间的间距，也称为沟槽(gutter)
网格布局中的属性
CSS中可用于网格布局的属性跟Flexbox的差不多，其中分为可用于网格容器的属性和可用于网格项目的属性，这里可用于网格容器的属性较多
作用于网格容器的属性:
display,grid-template-columns,grid-template-rows,grid-template-areas,grid-template,gap,grid-auto-columns,grid-auto-rows,grid-auto-flow,grid,masinry-auto-flow,justify-content,justify-items,align-items,place-items,align-content,place-content,align-tracks,justify-tracks
对于以上属性，总体又分为两部分，一部分主要时构建网格的，比如grid-template- 和grid-auto- 等；而另外一部分主要是用来调整网格的对齐方式，比如justify-content,align-content等。
作用于网格项目的属性:
grid-row（分为grid-row-start和grid-row-end),grid-column(分为grid-column-start和grid-column-end), grid-area等属性，它们主要是用来设置项目位置的，其他还有设置网格项目对齐方式，如justify-self,align-self等。
我们要使用 CSS 网格布局来构建 Web 布局，首先需要 定义一个网格 和 设置网格大小 。而这两件事情使用几个 CSS 属性就可以完成，只不过这些属性深藏着很多不同的使用方式，而且带来的作用和灵活性都会不同。
而定义一个网格很简单，只需要在一个元素上显式设置display的属性为grid或inline-grid即可，
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: grid //或inline-grid
}
当然我们要设置的网格会有很多需求，这就需要设置其他属性来搭建网格，根据这些属性定义的网格又分为显式网格和隐式网格。
grid-template-*定义的网格是显式网格
grid-auto-*定义的网格是隐式网格
