【CSS】css grid 布局

css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。

比如我们要达到下面这样一个效果要怎么做？

图中有16个元素，我们要其自适应宽度，按照我们以前的想法肯定是直接通过media，媒体查询来完成这个，但是代码肯定不会简洁，但是我们通过grid 布局只需要几行代码!

  代码长这样：

CSS：

#container {

display: grid;

grid-gap: 1em;

grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr) ) ;

}

#container > div {

background-color: skyblue;

height: 200px;

}

HTML：

< div id= "container" >

< div >1 </ div >

< div >2 </ div >

< div >3 </ div >

< div >4 </ div >

< div >5 </ div >

< div >6 </ div >

< div >7 </ div >

< div >8 </ div >

< div >9 </ div >

< div >10 </ div >

< div >11 </ div >

< div >12 </ div >

< div >13 </ div >

< div >14 </ div >

< div >15 </ div >

< div >16 </ div >

</ div >

container的CSS代码display: grid;，基础代码，将container的布局设置为网格布局。

第二句 grid-gap: 1em;是简写： grid-column-gap 和 grid-row-gap的简写，顾名思义就是行与行 列与列之间的间距。

第三局 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;。grid-template-columns是显示网格属性，我们可以用此属性来代替flex布局，暂且记住就是处理列的，将一整行分割为多少列，可以使用这个，这句代码的意思是，一行里面所划分多少个单元格的是自适应的（auto-fill），宽度怎么来定，minmax就是最小值和最大值的写到一起的并称，最小值是200px，最大值是 1fr, fr是什么，是css grid一个新的单位，就可以理解为，将目前水平或者垂直宽度分成多少份的距离，这里1fr 就是container水平宽度/1的距离了，也就是父元素最大宽度了,但是我们是不能直接将一个元素比如第三个div设置一个宽度，然后你会想到后面的就挤下去了，而是需要给第三个div设置 grid-column: auto / span 2 【这一句代码就是当前单元格 从任意列开始，将跨2个单元格，水平占据2个单元格的空间，span就有跨越跨度的意思，这和表格里面的colspan是类似的】。

------------------------------------

好，我们开始，如何画格子？！

.container {

display: grid;

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

grid-row-gap: 1em;

grid-column-gap: 2em;

}

效果是这样：

容器这样设置样式，设置grid-template-columns为3个100px，表示该container下面一行有三列，至于有多少行可以通过 grid-template-rows来设置，比如我们添加下面的css。

grid-template-rows: 100px 200px 300px;

变成了下面这样：

上面的代码我可以优化一下，通过repeat, 来改成下面这样：

grid-template-columns: repeat( 3, 100px);

实际上这个就等于 100px 重复三次。

重点！！！！

 但是grid-template-columns 和repeat经常配合起来使用，就比如文章开头提到的那个效果实现。下面列举了一下常见的用法：

/** 模拟flex布局 将一行分成3列，占比为1：2：1 */

/* grid-template-columns: 1fr 2fr 1fr; */

/** 模拟flex布局 第一列200px 剩余的空间分成2等份，占比为1：2 */

/* grid-template-columns: 200px 1fr 2fr; */

/** 格子自适应排列，每一列的宽度最小200px，最大剩余可用宽度 */

grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr)) ;

/** 自适应按照每个格子210px等分 */

/* grid-template-columns: repeat(auto-fill, 210px); */

/** 第一列和最后一列20px 中间剩余空间分成6分【设置了这个，就不要设置grid-item的最大最小宽度，不然显示错乱，自行尝试】 */

/* grid-template-columns: 20px repeat(6, 1fr) 20px; */

/** 每一行分成6等份，实际就等于grid-template-columes: 1fr 1fr 1fr 1fr 1fr 1fr*/

/* grid-template-columns: repeat(6, 1fr); */

/*** 每一行分成5等份，每一等份分成2份，占比是1:2 */

/* grid-template-columns: repeat(5, 1fr 2fr); */

我们先把grid-template-rows设置为3个100px, 或者将cell div高度设置为100px，然后让第四个div跨两行，可以像下面这样写：

     /**方法一*/

      grid-column-start: 1;

grid-column-end : 3 ;

/**方法二*/

grid-column: 1 / 3 ;

/**方法三*/

grid-column: 1 / span 2 ;

/**方法一二三有同样的效果*/

最后的效果是这样：

如果你想使用grid布局做出更加酷的效果，你也许需要了解一下grid-auto-flow

你也可以点击这个链接和这个链接来查看本文的demo html文件，里面会有一些其他小的扩展。

但是更多的需要自己去探索！

参考： MDN

          https://medium.freecodecamp.org/how-to-recreate-mediums-article-layout-with-css-grid-b4608792bad1  

          https://medium.com/@patrickbrosset/css-grid-css-multi-columns-7664f59bb60c