web前端--grid布局

程序员文章站 2022-03-28 20:21:39

...

grid 布局

grid概述

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局；

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局

gird很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item）。

作用在gird容器之中的属性

grid-template-rows
grid-template-columns
grid-template-areas         /* 给我们网格划分区域,grid子项只要使用grid-area数学指定隶属于哪个区*/
grid-template  这个是grid-template-rows grid-template-columns grid-template-areas 属性的缩写 

grid-column-gap
grid-row-gap
grid-gap	`这个是grid-column-gap grid-row-gap    属性的缩写`

justify-items
align-items
place-items

justify-content
align-content
place-content

grid-template-rows、grid-template-columns、grid-template-areas和grid-template

grid-template-rows

grid-template-columns

.big-box{   
            display: grid;
            width: 350px;
            height: 350px;
            border:1px solid green;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px;
        }
 .small-box{
            border:1px solid black;
            background-color: #ff6700;
        }       
<div class="big-box"> 
        <div class="small-box">1</div>
        <div class="small-box">2</div>
        <div class="small-box">3</div>
        <div class="small-box">4</div>
        <div class="small-box">5</div>
        <div class="small-box">6</div>
        <div class="small-box">7</div>
        <div class="small-box">8</div>
        <div class="small-box">9</div>
    </div>

效果图
web前端--grid布局
grid-template-areas

给我们网格划分区域,grid子项只要使用grid-area数学指定隶属于哪个区

代码

<style>
	.big-box{   
	            display: grid;
	            width: 350px;
	            height: 350px;
	            border:1px solid green;
	            grid-template-rows: 100px 100px 100px;
	            grid-template-columns: 100px 100px 100px;
	
	            grid-template-areas: 	 /*每个区域的名字可以自己定义*/
	                                "a1 a1 a2"
	                                "a1 a1 a3"
	                                "a1 a1 a3";`
	        }
	.small-box{
	            border:1px solid black;
	        }
	 .small-box:nth-child(1){
	            grid-area:a1; 	/*选中你要设置的区域*/
	            background-color: pink;
	        }
	 .small-box:nth-child(2){
	            grid-area:a2;
	            background-color: green;
	        }
	 .small-box:nth-child(3){
	            grid-area:a3;
	            background-color: yellow;
	        } 
</style>

 <body>
    <div class="big-box"> 
        <div class="small-box">1</div>
        <div class="small-box">2</div>
        <div class="small-box">3</div>
        <div class="small-box">4</div>
        <div class="small-box">5</div>
        <div class="small-box">6</div>
        <div class="small-box">7</div>
        <div class="small-box">8</div>
        <div class="small-box">9</div>
    </div>
</body>

效果图
web前端--grid布局

grid-template

这个是grid-template-rows grid-template-columns grid-template-areas 属性的缩写

grid-column-gap 和 grid-row-gap

grid-column-gap和grid-row-gap属性是定义网格中网格的间隙的尺寸

grid-gap是grid-row-gap grid-column-gap属性的缩写

例一：

.big-box{
		 grid-column-gap:20px ;
         grid-row-gap:50px ;
        }

 <div class="big-box"> 
        <div class="small-box">1</div>
        <div class="small-box">2</div>
        <div class="small-box">3</div>
        <div class="small-box">4</div>
        <div class="small-box">5</div>
        <div class="small-box">6</div>
</div>

web前端--grid布局

例二：

grid-column-gap
grid-row-gap

grid-column-gap和grid-row-gap属性是定义网格中网格的间隙的尺寸

这个是grid-row-gap grid-column-gap属性的缩写

<style>
    .big-box{   
            display: grid;
            width: 350px;
            height: 350px;
            border:1px solid green;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px;
            grid-row-gap:10px;   /*行之间的距离为10px*/
            grid-column-gap:10px;	/*列之间的距离为10px*/
            }
     .small-box{
            background-color: #ff6700;
            border:1px solid black;
        }
</style>
	<body>
	    <div class="big-box"> 
	        <div class="small-box">1</div>
	        <div class="small-box">2</div>
	        <div class="small-box">3</div>
	        <div class="small-box">4</div>
	        <div class="small-box">5</div>
	        <div class="small-box">6</div>
	        <div class="small-box">7</div>
	        <div class="small-box">8</div>
	        <div class="small-box">9</div>
	    </div>

效果图
web前端--grid布局
justify-items 和 align-items

justify-items 指定网格元素在网格内的水平呈现方式,是水平拉伸还是左右中呈现.
align-items 指定网格元素在网格内的垂直呈现方式,是垂直拉伸还是上下中呈现.
place-items 是align-items 和 justify-items的缩写

justify-items: start;

.big-box{   
            display: grid;
            width: 350px;
            height: 350px;
            border:1px solid green;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px;
            justify-items:start;  /*行由元素撑开  列还是100px 靠左边排列*/
        }
.small-box{
            background-color: #ff6700;
            border:1px solid black;
          }

web前端--grid布局

.big-box{  
			display:grid;
 			justify-items:end;
 		}

效果图

代码块

.big-box{  
			display:grid;
			align-items:center; 
		}

效果图

.big-box{  
			display:grid;
			align-items:center; 
		}

效果图
web前端--grid布局

.big-box{  
			display:grid;
			align-items:end; 
		}

效果图
web前端--grid布局

两个属性一起设置

.big-box{  
			display:grid;
	        justify-items:start; /* 行由元素撑开  列还是100px 左边排列 */
		    align-items:start;   /*列由元素撑开 居中排列 */
         }

效果图
web前端--grid布局

.big-box{  
			place-items:start center;   
			 /*此句是以上两个的简写 */
		}

.big-box{  
			justify-content: space-between;
			/*两端靠边 中间间隔平分*/
		}

web前端--grid布局

.big-box{  
			display:grid;
			justify-content: start;
		}

web前端--grid布局

.big-box{  
			display:grid;
			justify-content: end;
		}

web前端--grid布局

.big-box{   
            display: grid;
			align-content:end;
		}

web前端--grid布局

.big-box{   
            display: grid;
			align-content:space-between;
		}

web前端--grid布局

justify-items 、align-items 和 place-items

justify-items指定网格元素在网格内的水平呈现方式,是水平拉伸还是左右中呈现.

align-items指定网格元素在网格内的垂直呈现方式,是垂直拉伸还是上下中呈现.

place-items是align-items 和 justify-items的缩写

取值

stretch默认值,拉伸,表现为水平或者垂直填充

start 表现为容器左侧和顶部

end表现为容器右侧和底部对齐

center 表现为水平和垂直对齐

.big-box{   
            display: grid;
			justify-items:start; 
		    align-items:start;
		}

web前端--grid布局

justify-content 、align-content 和 place-content

justify-content 指定了整体网格元素在网格内的水平分布方式

align-content 指定了整体网格元素在网格内的垂直分布方式

place-content 是align-content 和 justify-content的缩写

取值

stretch默认值,拉伸,表现为水平或者垂直填充

start 表现为容器左侧和顶部

end表现为容器右侧和底部对齐

center 表现为水平和垂直对齐

space-between表现为两端对齐

space-around 享有不重叠的空白空间

space-evenly 平均分配空白空间

.big-box{
			display: grid;
			justify-content:space-between;
			align-content:end;
		}

web前端--grid布局

.big-box{
			display: grid;
			justify-content:space-between;
			align-content:space-between;
		}

web前端--grid布局

place-content 是space-align和align-center的复合样式

.big-box{
			display: grid;
			place-content:space-between space-between;
		}

web前端--grid布局

作用在gird子项上的属性

grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置 (span属性)
grid-row grid-row-start+grid-row-end的缩写
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-column grid-column-start+grid-cloumn-end
grid-area 当前网格占据的位置,名字和位置两种表现方式
justify-self 单个网格元素的水平对齐方式
align-self 单个网格元素的垂直对齐方式
place-self align-self+justify-self的缩写

grid-row-start 、grid-row-end、grid-column-start 和 grid-column-end

一个盒子如何进入到另一个盒子里？

grid-row-start     垂直方向上占据的起始位置
grid-row-end      垂直方向上占据的结束位置  (span属性)
grid-column-start   水平方向上占据的起始位置
grid-column-end    水平方向上占据的结束位置

起始位置

web前端--grid布局

.small-box{
            grid-row-start:2;
            grid-row-end:3;
            grid-column-start:2;
            grid-column-end:3;
			
	    /*  grid-row:2/3;
			grid-column:2/3;   此两句是以上四句的简写*/
			
		/*  grid-area:2/2 /3/3;   是以上两句的缩写
			第一个值为水平初始值，第二个为垂直初始值，第三个为水平结束值，第四个为垂直结束值*/
          }

变换后位置

web前端--grid布局
格子的延伸 span（作用在子元素上的）
grid-row-end: span 4;

.big-box{   
            display: grid;
            width: 350px;
            height: 350px;
            border:1px solid green;
        }
.small-box{
			 grid-row-end:span 4;
			 background-color: #ff6700;
             border:1px solid black;
		  }

<div class="big-box"> 
        <div class="small-box">1</div>
         <div class="small-box">2</div>
</div>

效果图
web前端--grid布局

justify-self 和 align-self

.small-box{
			justify-self:center;
		   }

效果图
web前端--grid布局

.small-box{
			 align-self:center;
		   }

web前端--grid布局

.small-box{
			justify-self:center;
			align-self:center;
			/*place-self:center center;   此句是以上两句的缩写*/
		   }

web前端--grid布局

gird-template-rows 和 grid-template-columns

对网格进行横纵划分,形成二维布局,单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)

有时候网格划分很规律,如果需要添加多个横纵网络时,可以使用repeat()语法进行简化操作

.big-box{
			grid-template-rows: 1fr 1fr 1fr;   /*三份相同*/
         }

web前端--grid布局

.big-box{
			grid-template-columns: 1fr 1fr 1fr;
         }

web前端--grid布局

.big-box{
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
         }

web前端--grid布局

grid-column-gap 和 grid-row-gap

.big-box{
		 grid-column-gap:20px ;
         grid-row-gap:50px ;
        }

 <div class="big-box"> 
        <div class="small-box">1</div>
        <div class="small-box">2</div>
        <div class="small-box">3</div>
        <div class="small-box">4</div>
        <div class="small-box">5</div>
        <div class="small-box">6</div>
</div>

grid-column-gap和grid-row-gap属性是定义网格中网格的间隙的尺寸

grid-gap是grid-row-gap grid-column-gap属性的缩写

web前端--grid布局

grid 布局

grid概述

作用在gird容器之中的属性

grid-template-rows、grid-template-columns、grid-template-areas和grid-template

grid-column-gap 和 grid-row-gap

例一：

例二：

justify-items 、align-items 和 place-items

justify-content 、align-content 和 place-content

作用在gird子项上的属性

grid-row-start 、grid-row-end、grid-column-start 和 grid-column-end

一个盒子如何进入到另一个盒子里？

起始位置

变换后位置

justify-self 和 align-self

gird-template-rows 和 grid-template-columns

grid-column-gap 和 grid-row-gap

asp.net基础学习之前端页面布局

提高Web性能的前端优化技巧总结

10分钟理解CSS3 Grid布局

前端培训要多少钱（web前端培训班教程）

web应用开发技术有哪些（web前端三大主流框架）

撩课-Web大前端每天5道面试题-Day6

web应用开发技术有哪些（web前端三大主流框架）

Web页面中八种创建多列等高(等高列布局)的实现技术

Web前端开发入门不得不看

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配