【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.freecodecamp.org_how-to-recreate-mediums-article-layout-with-css-grid-b4608792bad1][https://medium.com/@patrickbrosset/css-grid-css-multi-columns-7664f59bb60c ][https_medium.freecodecamp.org_how-to-recreate-mediums-article-layout-with-css-grid-b4608792bad1]
太过爱你忘了你带给我的痛
系统管理员
小鱼儿
爱被打了一巴掌
- 日理万妓
还没有评论，来说两句吧...