CSS栅格布局grid详解

梦里梦外; 2023-06-12 09:52 20阅读 0赞

栅格布局分为常规栅格和行内栅格，值分别为display:grid；和display:inline-grid；但是大多数栅格布局都是块级的。这里有一个需要注意的是，如果我们给一个标签设置了栅格布局，有的css属性和功能也就无法使用了，具体如下：

栅格容器上的所有column属性（column-count、columns等）都会被忽略。

栅格元素没有::first-line和::first-letter伪元素，如果使用，将会别忽略。

栅格容器内部的栅格元素的float和clear属性将被忽略。尽管如此，float属性对栅格容器中子元素的display属性的计算值是有影响的，因为栅格元素的display值在变成栅格元素之前计算的。

### 属性：gird-template-columns(列设置参数)，gird-template-rows(行设置参数) ###

下面就以设置列参数为例：gird-template-columns可以设置栅格容器有几列，每列的宽度，设置方法如下：

1、固定宽度：gird-template-columns：200px  50%  100px;

这个设置的意思是设置为三列，每列的宽度分别为200px，50%容器的宽度，100px；

2、设置最大最小尺寸：gird-template-columns：200px  minmax(100px,50%)  100px;

设置为三列，中间那一列的意思是最小宽度为100px，最大宽度是50%容器的宽度，

3、份数单位：fr；例如平均分成4列：gird-template-columns：1fr 1fr 1fr 1fr ;

也可以使用固定宽度和fr组合的：gird-template-columns：100px 1fr 200px;

这样设置的意思是把容器份分为三列，第一列为100px，第三列为200px，第二列为容器的剩余宽度，用1fr表示；如果是多列的话，就把除了固定的宽度剩余的空间进行分割比列，按照fr的总数进行相应比例分割。

例如：gird-template-columns：100px 1fr  3fr 200px;

4、让列的宽度尽可能大放下全部内容或者尽可能小显示内容即可，min-content和max-content；

例如：给列设置min-content的时候

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ceshi</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    .one{
    	display: grid;
    	/*height: 600px;*/
    	/*grid-template-columns:200px 50% 100px;*/
    	grid-template-columns:min-content min-content min-content;
    	/*grid-template-columns:max-content max-content max-content;*/
    	/*grid-template-rows:100px 50% 200px ;*/
    }
    	.one div:nth-child(1){
    		background: #f4f;
    	}
    	.one div:nth-child(2){
    		background: #0f0;
    	}
    	.one div:nth-child(3){
    		background: blue;
    	}
    	.one div:nth-child(4){
    		background: yellow;
    	}
    	.one div:nth-child(5){
    		background: pink;
    	}
    	.one div:nth-child(6){
    		background: #d4d4d4;
    	}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div>
    			<p>这就是自己的宽度根据不同的内容进行显示</p>
    		</div>
    		<div>
    			<p>中部</p>
    		</div>
    		<div>尾部的内容是多少呢</div>
    		<div>第二行第一个</div>
    		<div>第二行第二列的数据很多文字</div>
    		<div>第二行第三列</div>
    	</div>
    	
    </body>
    </html>

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

设置max-content的时候：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ceshi</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    .one{
    	display: grid;
    	/*height: 600px;*/
    	/*grid-template-columns:200px 50% 100px;*/
    	/*grid-template-columns:min-content min-content min-content;*/
    	grid-template-columns:max-content max-content max-content;
    	/*grid-template-rows:100px 50% 200px ;*/
    }
    	.one div:nth-child(1){
    		background: #f4f;
    	}
    	.one div:nth-child(2){
    		background: #0f0;
    	}
    	.one div:nth-child(3){
    		background: blue;
    	}
    	.one div:nth-child(4){
    		background: yellow;
    	}
    	.one div:nth-child(5){
    		background: pink;
    	}
    	.one div:nth-child(6){
    		background: #d4d4d4;
    	}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div>
    			<p>这就是自己的宽度根据不同的内容进行显示</p>
    		</div>
    		<div>
    			<p>中部</p>
    		</div>
    		<div>尾部的内容是多少呢</div>
    		<div>第二行第一个</div>
    		<div>第二行第二列的数据很多文字</div>
    		<div>第二行第三列</div>
    	</div>
    	
    </body>
    </html>

结果如下：

![20191112175243901.png][]

5、自定义适配内容宽度：fit-content（宽度值）；这个值得意思是如果栅格元素内容的宽度小于设置的宽度值，那么就会显示元素内容的宽度，如果超出了设置的宽度值，那么就会根据设置的宽度值显示。

.one{
        display:grid;
        grid-template-columns:fit-content(40px) fit-content(50px) fit-content(50px)
    }

6、重复创建列或者行:repeat(重复次数，列或者行的宽高值)，列或者行的宽高值不止一个，可以是多个，那样的话就是重复多列

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ceshi</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    .one{
    	display: grid;
    	/*height: 600px;*/
    	/*grid-template-columns:200px 50% 100px;*/
    	/*grid-template-columns:min-content min-content min-content;*/
    	grid-template-columns:repeat(2,200px);
    	grid-template-rows:repeat(3,100px);
    }
    	.one div:nth-child(1){
    		background: #f4f;
    	}
    	.one div:nth-child(2){
    		background: #0f0;
    	}
    	.one div:nth-child(3){
    		background: blue;
    	}
    	.one div:nth-child(4){
    		background: yellow;
    	}
    	.one div:nth-child(5){
    		background: pink;
    	}
    	.one div:nth-child(6){
    		background: #d4d4d4;
    	}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div>
    			<p>这就是自己的宽度根据不同的内容进行显示</p>
    		</div>
    		<div>
    			<p>中部</p>
    		</div>
    		<div>尾部的内容是多少呢</div>
    		<div>这是一个弟弟</div>
    		<div>其中一些呵呵数据很多文字</div>
    		<div>我们都是一家</div>
    	</div>
    	
    </body>
    </html>

展示结果如下：呈现为2列3行的展示效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

重复多列：grid-template-columns:repeat(3,100px 200px);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

7、auto-fill自动填充和自动去除空栅格元素auto-fit，也就是显示有标签元素的栅格

.one{
    	display: grid;
    	grid-template-columns:repeat(auto-fill,100px) repeat(3,450px);
    	grid-template-rows:repeat(3,100px);
    }

自动填充结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3][]

自动删除空元素：

这个是auto-fill的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 4][]

这个是auto-fill的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 5][]

8、栅格区域划分grid-template-areas和grid-area，通过设置总共的栅格布局样式和单个栅格的区域进行划分

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ceshi</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    .one{
    	display: grid;
    	width: 600px;
    	grid-template-rows:repeat(3,100px);
    	grid-template-areas:
    	"head head head" 
    	"center main grit" 
    	"center footer footer";
    }
    	.one .head{
    		background: #f4f;
    		grid-area: head;
    	}
    	.one .center{
    		background: #0f0;
    		grid-area: center;
    	}
    	.one .main{
    		background: blue;
    		grid-area: main;
    	}
    	.one .grit{
    		background: yellow;
    		grid-area: grit;
    	}
    	.one .footer{
    		background: pink;
    		grid-area: footer;
    	}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div class="head"></div> -->
    		<div class="head">sssssssssssssssssssssssssssssssssssss</div>
    		<div class="center">ttttttttt</div>
    		<div class="main">rrrrrrrrrrr</div>
    		<div class="grit">ggggggg</div>
    		<div class="footer">ffffffff</div>
    	</div>
    	
    </body>
    </html>

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 6][]

9、栅格附加元素：列线：grid-row-start;grid-row-end;行线：grid-column-start,grid-column-end;通过这四个属性可以把一块区域的栅格元素部分设置成一个一个标签的内容。通过设置栅格线的初始行和列的位置，围成一个区域把这个区域设置成一个标签的内容区域。

/* 栅格容器样式 */
    .one{
        display:grid;
        grid-template-columns:repeat(5,100px);
        grid-template-rows:repeat(5,100px);
    }
    /* 内容样式 */
    .content{
        grid-row-start:2;grid-row-end:4;
        grid-column-start:2;grid-column-end:4;
    }

还可以在附加元素后面加上span 2等数字代表着初始或者结束向前向后移动两个栅格线的距离。

/* 栅格容器样式 */
    .one{
        display:grid;
        grid-template-columns:repeat(5,100px);
        grid-template-rows:repeat(5,100px);
    }
    /* 内容样式 */
    .content{
        grid-row-start:2;grid-row-end:span 2;
        grid-column-start:2;grid-column-end:span 2;
    }

以上代码和第一种代码的效果是等效的。

除此之外还有隐式的栅格线设置，也就是上边的设置简化版：grid-row和grid-column，设置如下：

/* 栅格容器样式 */
    .one{
        display:grid;
        grid-template-columns:repeat(5,100px);
        grid-template-rows:repeat(5,100px);
    }
    /* 内容样式 */
    .content{
        grid-row：2 / 4;
        grid-column:2 / 4;
    }

10、栅格流：grid-auto-flow:row/column;默认栅格排列的方向是横排列，从左到右排列，以列为主导row；如果想要让内容从上到下排列，也就是以行为主导，依次进行排列，这时候就应该设置column:

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ceshi</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
        .one{
    	    display: grid;
    	    width: 600px;
    	    height: 200px;
    	    grid-auto-flow:column;
        }
    	.one .head{
    		background: #f4f;
    		grid-row: auto;
    		grid-column: auto;
    		width: 300px;
    		height: 50px;
    	}
    	.one .center{
    		background: #0f0;
    		grid-row: auto;
    		grid-column: auto;
    		width: 300px;
    		height: 100px;
    
    	}
    	.one .main{
    		background: blue;
    		grid-row: auto;
    		grid-column: auto;
    	}
    	.one .grit{
    		background: yellow;
    		grid-row: auto;
    		grid-column: auto;
    	}
    	.one .footer{
    		background: pink;
    		grid-column: auto;
    		grid-row: auto;
    	}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div class="head">sssssssssss</div>
    		<div class="center">ttttttttt</div>
    		<div class="main">rrrrrrr</div>
    		<div class="grit">ssssssssssssssssssssssg</div>
    		<div class="footer">ffffffff</div>
    	</div>
    	
    </body>
    </html>

正常默认排列

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 7][]

grid-auto-flow:column;排列，默认的是先排满一行然后在排下一行，而column是先填满一列再填下一列；

11、设置列宽度和行高度，grid-auto-columns和grid-auto-rows，设置的都是整体的宽度和高度，如果是单独设置一个栅格元素的宽高，那么可以进行覆盖设置。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ceshi</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    .one{
    	display: grid;
    	width: 600px;
    	height: 200px;
    	/*grid-template-columns:repeat(3,100px);*/
    	grid-auto-flow:column;
    	grid-auto-rows:50px;
    }
    	.one .head{
    		background: #f4f;
    		grid-row: auto;
    		grid-column: auto;
    		width: 300px;
    		height: 50px;
    	}
    	.one .center{
    		background: #0f0;
    		grid-row: auto;
    		grid-column: auto;
    		width: 300px;
    		height: 100px;
    
    	}
    	.one .main{
    		background: blue;
    		grid-row: auto;
    		grid-column: auto;
    	}
    	.one .grit{
    		background: yellow;
    		grid-row: auto;
    		grid-column: auto;
    	}
    	.one .footer{
    		background: pink;
    		grid-column: auto;
    		grid-row: auto;
    	}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div class="head">sssssssssss</div>
    		<div class="center">ttttttttt</div>
    		<div class="main">rrrrrrr</div>
    		<div class="grit">ssssssssssssssssssssssg</div>
    		<div class="footer">ffffffff</div>
    	</div>
    	
    </body>
    </html>

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 8][]

12、栏距：值得是每一个栅格元素之间的距离，可以通过grid-row-gap和grid-column-gap进行设置，或者使用grid-gap：行间距 列间距；进行设置，具体如下设置每一列间距10px：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ceshi</title>
    	<style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    .one{
    	display: grid;
    	width: 600px;
    	height: 200px;
    	grid-auto-flow:column;
    	grid-column-gap:10px;
    }
    	.one .head{
    		background: #f4f;
    		grid-row: auto;
    		grid-column: auto;
    		width: 300px;
    		height: 50px;
    	}
    	.one .center{
    		background: #0f0;
    		grid-row: auto;
    		grid-column: auto;
    		width: 300px;
    		height: 100px;
    
    	}
    	.one .main{
    		background: blue;
    		grid-row: auto;
    		grid-column: auto;
    	}
    	.one .grit{
    		background: yellow;
    		grid-row: auto;
    		grid-column: auto;
    	}
    	.one .footer{
    		background: pink;
    		grid-column: auto;
    		grid-row: auto;
    	}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div class="head">sssssssssss</div>
    		<div class="center">ttttttttt</div>
    		<div class="main">rrrrrrr</div>
    		<div class="grit">ssssssssssssssssssssssg</div>
    		<div class="footer">ffffffff</div>
    	</div>
    	
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 9][]

13、栅格的对齐方式：分为纵向对齐和横向对齐，

行内方向对齐目标：justify-self,justify-items,justify-content

块级方向对齐元素：align-self,align-items,align-content，

其中justify-self是对栅格单个元素进行横向的对齐（左，中，右），algin-self是对栅格元素进行纵向的对齐（上，中，下）

而justify-items和align-items是对栅格全部的元素进行横向和纵向对齐；

justify-content和algin-content是对整行和整列元素进行对齐和排布。具体请看[http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html][http_www.ruanyifeng.com_blog_2019_03_grid-layout-tutorial.html]

以上就是我对grid的基本认识和学习

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191112174302817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[20191112175243901.png]: https://img-blog.csdnimg.cn/20191112175243901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113094106226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191113094917891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191113102511991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191113103324543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191113103459757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191113112621941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191113163320922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191113165806848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191113170813572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ==,size_16,color_FFFFFF,t_70
[http_www.ruanyifeng.com_blog_2019_03_grid-layout-tutorial.html]: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html