Grid网格布局

系统管理员 2023-01-03 04:11 218阅读 0赞

## 简介 ##

> Flex布局时一维的布局，即水平或垂直方向的布局。而Grid布局则划分成“行”和“列”，产生单元格，可以看作是二维的布局。Grid布局远比Flex布局强大

## 容器 ##

定义网格布局，定义网格布局后，容器子元素的float、display：inline-block、display：table-cell、vertical-align和column-\*都将失效。

.div {
    	display: grid； 
    	display: inline-grid;   //容器元素可以是块元素或行内元素
    }

## 容器属性 ##

*  **grid-template-columns | grid-template-rows**

.container {
    	display: grid;
    	grid-template-columns: 30px 30px 30px;   //定义有多少列，且每列宽度为多少
    	grid-template-rows: 33.33% 33.33% 33.33%;  //定义有多少行，且每行行高为多少
    	//单位可以是绝对单位，也可以是百分比
    }

1.  repeat(num, value)  
    可以简化重复的值，避免重复写同样的值，尤其是网格比较多时， num为重复次数，value为重复的值（可以单个，如30px；或多个，如30px 20px 50px）。

.container {
    	display: grid;
    	grid-template-columns: repeat(3, 30px);
    	grid-template-rows: repeat(3,33.33%);
    }

1.  auto-fill关键字  
    有时候单元格大小固定，但容器却不固定，如希望每行容纳尽可能多的单元格，则使用auto-fill关键字表示自动填充

.container {
    	display: grid;
    	grid-template-columns: repeat(auto-fill, 100px);
    }

1.  fr关键字  
    表示比例关系，fr（fraction的缩写，以为片段）

.container {
    	display: grid;
    	grid-template-columns: 1fr 2fr;   // 表示两列，第二列比第一列宽2倍
    	//grid-template-columns: 150px 1fr 2fr;  //可以与绝对单位结合，表示第一列占150px，然后第二、三列按比例瓜分剩余空间（如有的话）
    }

1.  minmax()  
    定义一个长度范围，表示最小值和最大值

.container {
    	display: grid;
    	grid-template-columns: 1fr 1fr minmax(100, 1fr); //表示列宽不小于100px，不大于1fr
    }

1.  auto关键字  
    定义自适应长度

.container {
    	display: grid;
    	grid-template-columns: 50px auto 100px; //第二列宽度=容器宽度-50px-100px，最小值为0
    }

1.  网格线名称  
    定义网格线名称，方便引用

.container {
    	display: grid;
    	grid-template-columns: [c1] 100px [c2] 100px [c3] 30px [c4];
    	grid-template-columns: [r1] 100px [r2] 30px [r3] 40px [r4 end4];   //也可以在一个[ ]中定义两个名称，如[r4 end4]
    }

*  **grid-column-gap | grid-row-gap | grid-gap**  
    定义列间，行间间隔大小。根据最新标准，这些属性可省略前缀grid-，即column-gap | row-gap | gap

.container {
    	display: grid;
    	grid-column-gap: 10px; //表示列间间隔10px
    	grid-row-gap: 10px;  //表示行间间隔10px
    }
    
    .container {
    	display: grid;
    	grid-gap: 10px 8px;  //grip-gap时grip-column-gap和grip-row-gap的合并，表示列间间隔10px，行间间隔8px
    }

*  **grid-template-areas**  
    指定区域，一个区域可由单个或多个单元格组成  
    区域名会影响道网格线，会自动命令该区域起始网格线为【区域名-start】，终止网格线为【区域名-end】

.container {
    	display: grid;
    	grid-template-columns: 100px 10px 100px;
    	grid-template-rows: 100px 100px 100px;
    	grid-template-areas: 'a b c'
    	                     'd e f'
    					      g h i';  //如果某个区域不需要利用，则使用“点”  .  表示
    }

*  **grid-auto-flow**  
    定义子元素排列顺序

> row(默认值)： 即“先行后列”  
> column: 即“先列后行”  
> row dense: 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格  
> column dense: 表示"先列后行"，并且尽可能紧密填满，尽量不出现空格

*  **justify-items | align-items | place-items**  
    justify-items定义单元格内容水平位置，align-items定义单元格内容垂直位置  
    place-items是前两者的合并简写

> start: 左（上）对齐  
> end: 右（下）对齐  
> center: 居中  
> stretch: 拉伸，占满整个单元格

*  **justify-content | align-content | place-content**  
    定义整个内容区域的对齐方式，justify-content定义水平方向，align-content定义垂直方向，place-content是前两者的合并简写

> start: 左（上）对齐  
> end: 右（下）对齐  
> center: 居中  
> stretch: 拉伸，占满整个单元格  
> space-around：每个成员两侧（上下）间隔相等  
> space-between: 成员之间间隔相等，成员与容器边框没有间隔  
> space-evently: 成员之间，成员与容器边框之间的间隔相等

*  **grid-auto-columns | grid-auto-rows**  
    当成员的指定位置，在现有网格之外，浏览器就会自动生成多余网格，以放置该成员

.container {
    	display: grid;
    	grid-template-columns: 100px 10px 100px;
    	grid-template-rows: 100px 100px 100px;
    	grid-auto-rows: 30px;    //表示自动生成网格的行高
    	grid-auto-columns: 50px;   //表示自动生成网格的列宽
    }

## 项目属性 ##

*  **grid-column-start | grid-column-end | grid-row-start | grid-row-end**  
    定义成员的位置，指定成员的四个边框分别定位在哪根网格线  
    值可以为序号，也可以为网格名，也可以使用span value表示成员跨越多少个网格

> grid-column-start：左边框所在的垂直网格线  
> grid-column-end：右边框所在的垂直网格线  
> grid-row-start: 上边框所在的水平网格线  
> grid-row-end: 下边框所在的水平网格线

*  **grid-column | grid-row**  
    grid-column是grid-column-start和grid-column-end的合并简写  
    grid-row是grid-row-start和grid-row-end的合并简写

.item{
    	grid-column: 1 / 2;
    	grid-row: 1 / 3;   // 也可以grid-row: 1 / span 2表示
    }
    等同于
    .item{
    	grid-column-start: 1;
    	grid-column-end: 2;
    	grid-row-start: 1;
    	grid-row-end: 3;
    }

*  **grid-area**  
    指定成员放在哪个区域

.item{
    	grid-area: e;   //指定成员在e单元格
    }
    // grid-area可以用作grid-row-start,grid-ros-end,grid-column-start,grid-column-end的合并简写，直接指定成员位置+
    .item {
    	grid-area: <row-start> / <row-end> / <column-start> / <column-end>;   
    }

*  **jusify-self | align-self | place-self**  
    指定某个成员的对齐方式，与justify-items和align-items类似，但前者只作用于单个成员  
    place-self则是前两者的合并简写

## 参考 ##

> 阮一峰大神：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html