【CSS】css grid 布局

快来打我* 2022-05-25 12:05 413阅读 0赞

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

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

![20180514221715251][]

图中有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;

效果是这样：

![70][]

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

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

变成了下面这样：

![70 1][]

上面的代码我可以优化一下，通过[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 ;

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

最后的效果是这样：

![70 2][]

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

你也可以点击[这个链接][Link 1]和[这个链接][Link 2]来查看本文的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]

[20180514221715251]: /images/20220525/68814423d58947098c89a500a0abdbf2.png
[grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
[70]: /images/20220525/606c2a86c5424bd5b7fdfb1a58344fdb.png
[70 1]: /images/20220525/d7450075328d450898b28c182df1c1cf.png
[repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
[70 2]: /images/20220525/399f543c713d453c8f7b1dbe959b994f.png
[grid-auto-flow]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-flow
[Link 1]: https://github.com/aeolusheath/FrontExersize/blob/master/html/css-grid.html
[Link 2]: https://github.com/aeolusheath/FrontExersize/blob/master/html/css-grid-two.html
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
[https_medium.freecodecamp.org_how-to-recreate-mediums-article-layout-with-css-grid-b4608792bad1]: https://medium.com/@patrickbrosset/css-grid-css-multi-columns-7664f59bb60c