css grid网格布局

比眉伴天荒 2022-01-12 07:07 439阅读 0赞

初次认识grid布局，看了官方的文档也很明了（[官方文档][Link 1]），然后通过自己的语言和理解，重新对他进行了总结。

> 摘要：网格布局是网站设计的基础，CSS网格模块是创建它的最强大，最简单的工具。我个人认为它比Bootstrap好很多。该模块还得到了由本机支持主流浏览器（Safari浏览器，Chrome浏览器，火狐，EDGE），所以我相信所有的前端开发人员必须学习这一技术在不太遥远的将来。

**代码演示：**  
CSS Grid的两个核心组成部分是父容器（父）和 子块（子）。父容器是最外层的包裹，子块是网格内的内容。  
**1.最开始的样子**

先粗略的设置它的css样式

![粗略的css样子][css]

**2.现在把他设置为一个两行（row）三列（column）的样子，子块的宽高分别为100px 和50px**

.wrapper{
    			width:80%;
    			border:1px solid red;
    			display: grid;
    			grid-template-columns: 100px 100px 100px; 
    			grid-template-rows: 50px 50px ;
    		}
    .time1{
    			background:red;
    		}
    		.time2{
    			background:blue;
    		}
    		.time3{
    			background:pink;
    		}
    		.time4{
    			background:gray;
    		}
    		.time5{
    			background:green;
    		}
    		.time6{
    			background:yellow;
    		}

![这里就形成了一个简单的网格状][20190621140603177.png]

![在这里插入图片描述][20190621140839441.png]![在这里插入图片描述][2019062114103425.png]  
比如说我们这里的两行三列，需要设置grid-template-columns: 100px 100px 100px; （*设置为3个参数，控制列数，可根据自己的需要设置参数的大小*），grid-template-rows: 50px 50px; （*设置为两个参数，控制行数，根据自己的需要设置参数的大小*）

**3.子块需要涉及到的属性**  
现在的需求是把这个改为3行的网格，但是我们只有六个子块，那就需要设置子块的位置。

![生成3行][3]  
grid-column-start:2;grid-column-end:4;的意思就是从列线2开始，到列线4结束  
![列线][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]

[Link 1]: https://www.freecodecamp.org/news/learn-css-grid-in-5-minutes-f582e87b1228/
[css]: /images/20220109/faac82de6bb64df1b9836dfe0b84f07c.png
[20190621140603177.png]: /images/20220109/d7d8a2dd02f148c68b233335c1565c8e.png
[20190621140839441.png]: https://img-blog.csdnimg.cn/20190621140839441.png
[2019062114103425.png]: /images/20220109/03f81f08a3074f1c8d4d97857a81b151.png
[3]: /images/20220109/b60574b6b7b846c88f51fea1136a28a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20220109/b6a61052f96542ec8dcbf366a3805597.png