【CSS】css grid 布局
css grid布局出来很久了,可以翻译成栅栏布局,或者网格布局,看到了一个很好的应用,所以写下此篇基础教程。
比如我们要达到下面这样一个效果要怎么做?
图中有16个元素,我们要其自适应宽度,按照我们以前的想法肯定是直接通过media,媒体查询来完成这个,但是代码肯定不会简洁,但是我们通过grid 布局只需要几行代码!
代码长这样:
CSS:
HTML:
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是类似的】。
------------------------------------
好,我们开始,如何画格子?!
效果是这样:
容器这样设置样式,设置grid-template-columns为3个100px,表示该container下面一行有三列,至于有多少行可以通过 grid-template-rows来设置,比如我们添加下面的css。
变成了下面这样:
上面的代码我可以优化一下,通过repeat, 来改成下面这样:
实际上这个就等于 100px 重复三次。
重点!!!!
但是grid-template-columns 和repeat经常配合起来使用,就比如文章开头提到的那个效果实现。下面列举了一下常见的用法:
我们先把grid-template-rows设置为3个100px, 或者将cell div高度设置为100px,然后让第四个div跨两行,可以像下面这样写:
最后的效果是这样:
如果你想使用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