CSS3 神奇的grid

今天看微信公众号看到了一个新的布局方法display：grad，第一次见，然后觉得找一篇文件去学习一下。该布局比较适用于一个展示型的页面，很简单的css可以实现以前很复杂css才能实现的布局。
浏览器支持度
IE10以上 和大部分主流浏览器都支持。
以前我们做一个这样的布局，我们一般会使用flex布局吧。现在我们可以用grid实现，当你学会这个布局你会发现这个更神奇,文章有点长如果你看不完可以下次继续看，一定耐心看完会受益匪浅（个人建议一边学一边自己敲，不然可能理解不了）
先简单的介绍一下下边用grid写的css

	<div class="container">
        <div style="background: blue;"><p>1</p></div>
        <div style="background: rgb(127, 127, 128);"><p>2</p></div>
        <div style="background: yellow;"><p>3</p></div>
        <div style="background: red;"><p>4</p></div>
        <div style="background: brown;"><p>5</p></div>
        <div style="background: orange;"><p>6</p></div>
        <div style="background: green;"><p>7</p></div>
        <div style="background: salmon;"><p>8</p></div>
        <div style="background: aqua;"><p>9</p></div>
    </div>
    <style>
      *{
    
    
            margin: 0px;
            padding: 0px;
        }
    .container {
    
    
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .container div{
    
    
        text-align: center;
        line-height: 100px;
    }
    </style>

详解grid

1、容器代码

<div class="container">
        <div style="background: blue;"><p>1</p></div>
        <div style="background: rgb(127, 127, 128);"><p>2</p></div>
        <div style="background: yellow;"><p>3</p></div>
        <div style="background: red;"><p>4</p></div>
        <div style="background: brown;"><p>5</p></div>
        <div style="background: orange;"><p>6</p></div>
        <div style="background: green;"><p>7</p></div>
        <div style="background: salmon;"><p>8</p></div>
        <div style="background: aqua;"><p>9</p></div>
    </div>

container为该布局的容器，容器中每一行（row），每一列（colum）
这样的布局会产生n（行）乘m（列）个单元格（以下我们称为单元格），会产生n+1根水平线，m+1跟垂直线（以下称为网格线）

1.display：grid

grid为块级元素

<style>
        *{
    
    
            margin: 0px;
            padding: 0px;
        }
    .container {
    
    
        display: grid;
        /* grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px; */
    }
    .container div{
    
    
        text-align: center;
        line-height: 100px;
    }
    </style>

2.display：inline-grid

display：inline-grid为行内元素

3.grid-template-columns 属性，grid-template-rows 属性

这个代码为我们最开始用的样式
grid-template-columns 控制列宽
grid-template-rows 控制行高
这两个属性赋值可以为固定值也可以为百分比
你在grid-template-columns这个后边写几个值表示这一行将出现几个块，如果这里不懂，请往下继续看你就会明白

3.1 repeat（）

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

.container {
    
    
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
或者
.container {
    
    
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

如果你用
grid-template-columns: repeat(2, 100px 20px 80px);
repeat的第一个参数表示的是一行或者一列重复几次。
那么第一行 1,4的列宽为100px，2,5为20px，3,6为80px
当然grid-template-rows也可以这么用，只不过他更改的是行高

如果grid-template-columns: repeat(3, 100px 20px 80px);
就变为下图了，这样你的理解就比较简单了吧

3.2 auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

扫描二维码关注公众号，回复： 12696097 查看本文章

3.3 fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
你可能会有这个疑问fr的大小是多少px呢
fr的大小根据你一列需要显示多少个比如下边这个1列为2fr ，如果你的容器为100px那么1fr表示50px（容器宽度/fr个数决定了fr的宽度）

.container {
    
    
  display: grid;
  grid-template-columns: 1fr 1fr;
}

3.4 minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

3.5 auto 关键字

auto关键字表示由浏览器自己决定长度。
auto的宽度由容器的宽度

grid-template-columns: 100px auto 100px;

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

4 grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {
    
    
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
  grid-row-gap: 20px;
  grid-column-gap: 40px;
}

3.6.1 grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

grid-gap: <grid-row-gap> <grid-column-gap>;
//上边那种形式
grid-gap:20px 40px

如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

5.grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.container {
    
    
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。
上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

如果某些区域不需要利用，则使用"点"（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

//注释表示用另一种方法也可以实现下边的样式
    <style>
        *{
    
    
            margin: 0px;
            padding: 0px;
        }
        .container {
    
    
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas: 'a b c'
                                 'd e f'
                                 'g h i';/*不添加这个属性*/
        }
    .container div{
    
    
        text-align: center;
        line-height: 100px;
    }
    .item1 {
    
    
        background-color: #ef342a;
         grid-column-start: a; /*1*/
        grid-column-end: b;/*3*/
    }
    .item2 {
    
    
        background-color: #f68f26;
        grid-column-start: d;/*1*/
        grid-column-end: e; /*3*/
    }
    </style>
</head>
<body>
    <div class="container">
        <div style="background: blue;" class="item1"><p>1</p></div>
        <div style="background: gray;" class="item2"><p>2</p></div>
        <div style="background: yellow;" class="item3"><p>3</p></div>
        <div style="background: red;" class="item4"><p>4</p></div>
        <div style="background: brown;" class="item5"><p>5</p></div>
        <div style="background: orange;" class="item6"><p>6</p></div>
        <div style="background: green;" class="item7"><p>7</p></div>
        <div style="background: salmon;" class="item8"><p>8</p></div>
        <div style="background: aqua;" class="item9"><p>9</p></div>
    </div>
</body>

6.grid-auto-flow 属性

默认为rows
注意数字的位置
上图为默认为rows

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
注意数字的位置

grid-auto-flow: column;

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

7justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）

.container {
    
    
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

value	说明
start	对齐单元格的起始边缘。
end	对齐单元格的结束边缘。
center	单元格内部居中。
stretch	拉伸，占满单元格的整个宽度（默认值）

8.justify-content 属性，align-content 属性，place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

.container {
    
    
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图完全一样，只是将水平方向改成垂直方向。）

value	说明
start	对齐容器的起始边框。
end	对齐容器的结束边框。
center	容器内部居中。
stretch	项目大小没有指定时，拉伸占据整个网格容器。
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between	项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly	项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。