web前端--grid布局

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>

效果图

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;