比flex布局还牛的grid布局

• 概述

Grid布局也称“网格布局”，是一个CSS的布局方案。跟flex有相似性，但是比flex强大，flex是一维的，只能针对容器的横竖边方向，布局里面的项目；但是grid是可以任意组合不同的网格，做出各种各样的布局，是二维的。

• 基本概念

Grid是将容器分为行和列，从而进行布局的，在学习相关的属性设置之前，需要了解一些基本的概念。

1.采用网格布局的块，称为容器，容器内，直接的子元素，，叫做项目，下面容器的属性定位都是对项目进行定位。

<div class="container">

        <div class="item item-1" >1</div>

        <div class="item item-2" >2</div>

        <div class="item item-3">3</div>

        <div class="item item-4">4</div>

        <div class="item item-5">5</div>

        <div class="item item-6">6</div>

        <div class="item item-7">7</div>

        <div class="item item-8">8</div>

        <div class="item item-9">9</div>

    </div>

最外面的<div>元素就是容器，里面的<div>元素就是项目。容器里面的水平区域叫做行，两条线组成一行，竖直区域叫做列，两条线组成一列。

2.行和列交叉形成的区域，就叫做单元格

3.组成行，列，单元格的这些分割线就是网格线，行，列，单元格都是由网格线组成的。

• 容器属性

Grid的属性分为两类，一类是容器内进行设置，对项目起作用；一类是项目内进行设置，对项目内内容起作用；

容器属性：

1. display:grid//指定容器的布局方式为grid，采用此布局后，项目的类似什么float:left等特殊布局方式都将失效，因为grid就是起布局作用的，会把项目内的布局方式给覆盖掉。

Display:inline-grid//这样设置容器元素为行内元素，容器内仍然采用grid布局。

1. grid-template-columns: xxpx xxpx 50% 2fr 1fr //这是列的设置，首先有多少项值设置，就代表着有多少列，每一列的宽度对应相应的设置值，设置值可以有多种表达方式，可以是明确的PX值，百分比值，fr(比例值)【这个用法通常是两项以上设置，然后这几项的宽就是按照比例进行划分，把未指定精确宽度的剩余区域划分完】

grid-template-rows//设置行，原理同上

【grid-template-rows ：repeat(3，100px)函数，用于以上两个属性值的设置，第一个参数代表几行，第二个参数代表行的高度，这个函数就是用于重复设置，也可grid-template- columns :repeat(2,100px 20px 50px ),对模式进行匹配，代表一共有6列，每一个模组就重复一次，就是100px 20px 50px 100px 20px 50px,当容器的宽度或者长度不清楚时，也可以利用repeat(auto-fill,xxpx),用auto-fill把容器以每列宽或高一把填满】；

auto关键字，为指定了一些固定的宽或高后，剩余的空间自动分配占满；

网格线还可以指定固定名称，在设置grid-template-rows/ columns的值，可以写【??】进行设置，直接对应每一条线，eg: grid-template-rows:[c1] 100px [c2] 100px [c3]

1. grid-gap：XXPX XXPX

grid-row-gap：xxpx\grid-column-gap// grid-row-gap是设置行与行的间隔，grid-column-gap是设置列与列的间隔;grid-gap是grid-column-gap与grid-row-gap的合并简写，如果没有书写到第二个值，则默认两个值一样。

1. grid-template-areas：’a a a’

 ‘d d i

‘c c c’//上方把整个网格分成了四个区域，分别是a,d,I,c，如果没有使用该单元格为区域内的话，则是直接使用.表示。此项设置，对项目内设置了单个项目大小的，具有作用，可以让一个项目，等于一个区域，区域可以是N个单元格，所以项目的大小也可以是N个单元格的大小。

1. grid-auto-flow;row/column/row dense/column dense//此项为设置单元各的排序方式，即各项目的排序方式，因为项目就是按照顺序，排进去每个对应的单元格的。Row为默认，先排满行，再排列；column为先列后行；row dense/column dense为row/column的加强版，保证了排列顺序之余，还自动把容器内设置的方向的剩余空间自动占满，尽量不出现空格。
2. justify-content/align-content:start|end|center|stretch|space-around

place-content:align-content justify-content

//此属性是对，整体项目在容器中的位置进行设置，属性值跟flex属性值设置类似，意思也一样；place-content是justify-content/align-content的合并简写，里面的属性值，就是单独时候的属性值。

1. justify-items/align-items:start|end|center|stretch//此属性是对项目内的内容位置进行设置，属性值跟flex基本一样，是对所有的单元格内内容进行统一设置。
2. grid-auto-columns/grid-auto-rows:xxpx//此属性为后期添加的，多余的单元格，添加设置值。

• 项目属性

1. grid-column-start/grid-column-end:1[c1]

grid-row-start/grid-row-end::3[c3]//这四个属性一起设置属性值，值为第几条线的数字或者是线的名称，代表这个项目占据多少个单元格；

grid-column:n/n+n//grid-column-start/end的简写形式；grid-row:n/n+n//grid-row-start/end的简写形式

1. grid-area:a//此属性为设置单元格放在哪一个区域内；
2. justify-self/align-self:start|end|center|stretch

place-self：align-self justify-self//此属性为设置单元格内内容的位置，跟flex类似，这个仅对设置了属性的单元格起效。Place-self是justify-self/align-self的合并简写，如果属性值省略一个值，则会认为两个值一样。