grid布局（grid布局居中）

CSS一直用来布局网页，但一直都不完美。一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。只要我们一直在制作网站，我们就一直在为解决布局问题不断探索，而Grid是第一个专门为解决布局问题而生的CSS模块。

前端页面布局之【Grid布局】详解_竖线

grid布局又称CSS网格布局，（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。
grid中的一些概念：

网格容器（Grid Container）元素应用display:grid，它是其所有网格项的父元素。
网格项（Grid Item）网格容器的直接子元素
网格线（Grid Line）组成网格线的分界线。它们可以是列网格线（column grid lines），也可以是行网格线（row grid lines）并居于行或列的任意一侧
网格轨道（Grid Track）两个相邻的网格线之间为网格轨道。
网格单元（Grid Cell）两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。
网格区（Grid Area）网格区是由任意数量网格单元组成

grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，ie10 11宣布它未来不久会对它有很好的支持，目前则需要使用过时的语法。所以grid布局目前常用于移动端布局

🌟 父元素上的属性

🌟 设置grid布局

🌟设置网格的列数与行数

grid-template-columns 它表示的是设置列数

grid-template-rows 与grid-template-columns的使用方法相同设置网格项的行数

简单例子

前端页面布局之【Grid布局】详解_竖线_02

前端页面布局之【Grid布局】详解_竖线_03

🌟通过网格单元的名字来布局 grid-template-areas

使用这个属性的时候，需要先用子元素上的grid-area属性给子元素起一个名字，然后再配合这个属性来时使用

前端页面布局之【Grid布局】详解_属性值_04

🌟设置网格轨道的大小

grid-column-gap和grid-row-gap 用来指定横竖网格轨道的大小只在两个单元格之间产生间距，不再边缘产生
grid-gap grid-column-gap和grid-row-gap这两个属性的缩写方式

前端页面布局之【Grid布局】详解_竖线_05

🌟justify-items

网格中所有单元格中的内容在网格项X轴的对齐方式默认是占满宽度整个X轴

前端页面布局之【Grid布局】详解_默认值_06

🌟align-items

网格中所有单元格中的内容在网格项Y轴的对齐方式默认是占满宽度整个Y轴它的值与justify-items相同

前端页面布局之【Grid布局】详解_竖线_07

🌟justify-content

如果我们使用PX这种固定大小的布局方式的时候，网格的大小可能小于网格容器的大小

这个值是用来设置整个网格在网格容器中的X轴的排列方式

前端页面布局之【Grid布局】详解_竖线_08

前端页面布局之【Grid布局】详解_默认值_09

🌟align-content

如果我们使用PX这种固定大小的布局方式的时候，网格的大小可能小于网格容器的大小

这个值是用来设置整个网格在网格容器中的Y轴的排列方式

前端页面布局之【Grid布局】详解_默认值_10

前端页面布局之【Grid布局】详解_竖线_11

🌟grid-auto-columns和grid-auto-rows

设定隐藏的网格轨道的大小

自动生成隐式网格轨道（列和行），当你定位的网格项超出网格容器范围时，将自动创建隐式网格轨道。网格轨道大小,可以是固定值，百分比或者是分数（fr单位）。

🌟grid-auto-flow

在布局是时候，选择网格填充的方法

在没有设置网格项的位置时，这个属性控制网格项怎样排列。

设置grid-auto-flow：row，item-b、item-c和item-d在行上是从左到右排列
设置grid-auto-flow：column;
grid的简写方式和属性的顺序,设置网格容器所有属性。

grid: none | grid-template-rows / grid-template-columns | grid-auto-flow [grid-auto-rows [ / grid-auto-columns] ];

🌟设置子元素上的属性

🌟grid-area

给单个子元素起名字

这个属性就是配合父元素上的grid-template-areas属性来使用，grid-area就是给单个网格项起个名字

设置网格项位置的三种写法

grid-column-start grid-column-end grid-row-start grid-row-end

grid-column grid-row

grid-area grid-column和grid-row的缩写

前端页面布局之【Grid布局】详解_竖线_14

🌟设置单个子元素在其所在的网格项中的排列方式

justify-self 用来设置单个元素在单个网格项中X轴的布局

align-self 与justify-self:;类似，用来设置单个元素在单个网格中Y轴的布局方式，和justify-self有4个相同的值

更多前端知识请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！