css里面的网格布局

迈不过友情╰ 2023-07-21 08:46 28阅读 0赞

那么首先来说说一下CSS 中 Grid 网格布局与 Grid 栅格系统的关系

> CSS跟Grid布局没有半毛钱关系，Grid只不过是人们在遵循CSS规范的框架内摸索出来的一个最佳实践，你完全可以不鸟栅格布局，用CSS裸～奔。  
> 上面似乎等于没说，对不对？CSS是石头，Grid是砖头，页面是一扇墙，整个站点是房子，石头就可以砌墙建房，砖头不过是优化了的石头，砖头跟石头看起来那么理所当然，实际并非必须。君不见blueprint默认24列，bootstrap默认12列，宽度都是接近960，无非这家的砖头宽些，那家的砖头窄些，罢了  
> 作者：Harry Zhu  
> 链接：https://www.zhihu.com/question/28723221/answer/41925001  
> 来源：知乎  
> 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

先回答几个小问题  
**什么是网格布局？**  
网格布局是CSS的布局方案，它把网页划分成一个个网格，可以任意组合不同的网格来达到目标的布局效果。  
**那么Grid与Flex的区别**  
Flex布局：是在一条轴上面的布局（可以看成是一维的），当然也并不是说Flex不能二维布局  
Grid布局：是在两条轴上面的布局（可以看成是两维的）

# 那么现在开始主题 #

**display、grid-template-columns、grid-gap**

display: grid;								/*确定是网格布局*/
    grid-template-columns:10% 40% 40% 10%;		/*网格布局列宽为10%，40%，40%，10%*/
    /*上式也可表示为：grid-template-columns:1fr 4fr 4fr 1fr; fr为比例单位（推荐使用fr）*/
    /*grid-template-columns:repeat（3，1fr），代表重复3次的1fr距离*/
    grid-column-gap: 1em;						/*网格的列间距宽为1em*/
    grid-row-gap: 1em;							/*网格的行间距宽为1em*/
    /*grid-gap: 1em; 网格的间距宽度，代表上面两个的加强版*/
    /*grid-gap: 10em 5em; 前值为行间距，后值为列间距*/

**grid-auto-rows**

grid-auto-rows: 50px;						/*行高为100px*/
    /*grid-auto-rows: minmax(100px,auto); 这里含义为当内容不会撑开行高为100xp的盒子的时候行高就是100px，如果撑开了行高就自动 当然也有grid-auto-columns */

**justify-items**

justify-items: start;			/*涵义为：在其网格分布的行轴线开始处对齐，且针对所有的网格，类似与flex的justify-content 其取值有start|end|center|stretch（默认） */

**如图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]  
**align-items**

align-items: start;			/*按其网格布局的列轴线进行布局，且位置为开始位置，且针对所有的网格，类似与flex的align-items 其取值有start|end|center|stretch（默认） */

**align-self**

align-self: end;			/*按其网格布局的列轴线进行布局，且位置为结束位置，且针对单个网格，类似与flex的align-self 其取值有start|end|center|stretch（默认） */

**justify-self**

justify-self: end;			/*按其网格布局的行轴线进行布局，且位置为结束位置，且针对单个网格 其取值有start|end|center|stretch（默认） */

### 跨行与跨列： ###

**grid-row 属性是一种 grid-row-start 和 grid-row-end 的缩写（shorthand）形式  
grid-column 属性是一种 grid-column-start 和 grid-column-end 的缩写（shorthand）形式**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]

.box1{ 
    	grid-column:1/3;			/*代表是box1的列跨度为从第一个列基线到第三个列基线*/
    	grid-row:1/3				/*代表是box1的行跨度为从第一个行基线到第三个行基线*/
    }
    .box{ 
    	grid-column:3;				/*代表是box2的列跨度为第三个*/
    	grid-row:1/3				/*代表是box2的行跨度为从第一个行基线到第三个行基线*/
    }

**效果如图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]

### grid-template-areas ###

**原图为：**  
![在这里插入图片描述][20200406111722382.png]  
**CSS源码**

.wrapper div:nth-of-type(-n+7){ 
    	background-color: #2e6da4;
    }
    .wrapper{ 
    	display: grid;								/*确定为网格布局*/
       grid-template-areas:							/*网格布局的各个区域，名字不一定相同，但要突出语义化*/
           'header header header'
           'content content sidebar'
           'box-1 box-2 box-3'
           'footer footer footer'
           ;
       grid-gap: 1em;								/*行列间距为1em*/
    }
    .header{ 
       grid-area: header;							/*类为header的占据grid-template-areas定义的整个header区域，下面的以此类推*/
    }
    .content{ 
       grid-area: content;
    }
    .sidebar{ 
       grid-area: sidebar;
    }
    .box-1{ 
       grid-area: box-1;
    }
    .box-2{ 
       grid-area: box-2;
    }
    .box-3{ 
       grid-area: box-3;
    }
    .footer{ 
       grid-area: footer;
    }

**效果图为：**  
![在这里插入图片描述][20200406111653480.png]

本文只用于个人学习和记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/b6ee609237c6453698209e0b2e921f20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/abf3e1e4b0e447448467ed2e439d3117.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230528/4e84ba2449fc40c88a94f280c373b12c.png
[20200406111722382.png]: /images/20230528/74a133bcd82f4fe382d52496fbb32ea6.png
[20200406111653480.png]: /images/20230528/8edb469b371f49cfb4fe43a8b453e8de.png