Grid布局入门指南

风不识途
1,340 阅读7分钟

Grid布局目录

一.什么是Grid布局？

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

Grid布局则是将容器划分成“行”和“列",产生单元格,然后指定“项目所在"的单元格,可以看作是二维布局,Grid布局远比Flex强大

布局方式(常用三种)

  1. 传统布局方式 利用 position属性+ display 属性+float属性布局,兼容性最好,但是效率低,麻烦!
  2. flex布局 有一套属性,效率高,兼容性强
  3. Grid布局 网格布局(Grid)是最强大的css布局方案。但是知识点较多,学习成本相对困难些,目前的兼容性不如flex好!

浏览器兼容性

基本概念

  1. 容器(有容器属性)
  1. 项目(有项目属性)

二.容器属性

  1. grid-template-columns
  2. grid-template-rows
  3. grid-row-gap
  4. grid-column-gap
  5. grid-gap(3和4的复合属性)
  6. grid-template-areas
  7. grid-auto-flow
  8. justify-items
  9. align-items
  10. place- Items(8和9的复合属性)
  11. justify-content
  12. align-content
  13. place- content(11和12的复合属性)
  14. grid-auto-columns
  15. grid-auto-rows

1. grid-template-* 分配单位

你想要多少行或者列,就填写相应属性值的个数,不填写,自动分配

/* 三列,每一列100px */
grid-template-columns: 100px 100px 100px;
/* 行，每一行100px */
grid-template-rows: 100px 100px 100px 100px;

1.repeat() 重复的次数与值

第一个参数是重复的次数, 第二个参数是参数所要的重复的值要带单位

2.auto-fill 自适应

有时, 单元格大小是固定的, 但是容器的大小不确定, 这个属性就会自动适应填充/分配

/* auto-fill 容器没有设置宽高时,可以设为自适应 */
grid-template-columns: repeat(auto-fill,100px);

3.fr 比例关系

为了方便表示比例关系, 网格布局提供了fr关键字( fraction的缩写,意为"片段")

/* fr: 分了三列, 每列占三分之一 */
grid-template-columns: repeat(3,1fr);
/* 左边占六分之一,中间占六分之二,右边占六分之三 */
grid-template-columns: 1fr 2fr 3fr;

4.minmax() 最大值与最小值

函数产生一个长度范围, 表示长度就在这个范围之中, 它接受两个参数, 分别是最小值和最大值

/* minmax() 最小不会超过150px, 最大不会超过1fr */
grid-template-columns: 1fr minmax(150px,1fr);
image-20200418184135008
image-20200418184135008

5.auto

剩下的宽度自适应, 随着浏览器剩下的宽度自适应

/* auto 第二个盒子,剩下的宽度自适应 */
grid-template-columns: 100px auto 100px;
image-20200418184731673
image-20200418184731673

6.网格线

网格线,可以用方括号定义网格线名称,方便以后的引用

/* 辅助定位用的 */
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

2.grid-row-gap和grid-column-gap间距

item (项目) 相互之间的距离

/* 1. row-gap item之间行与行的间距 */
/* row-gap: 20px; */

/* 2. column-gap item之间列于列之间的距离 */
/* column-gap: 20px; */

/* 3. gap 复合属性,行于列之间的复合属性(行与列的间距),只写一个行于列都会生效 */
gap: 20px;
  • 注意∶根据最新标准,上面三个属性名的grd-前缀已经删除,grid- colum-gap和grid-row-gap写成 column-gap和row-gap,grid-gap写成gap

3.grid-template-areas

一个区域由单个或多个单元格组成,由你决定(具体使用,需要在项目属性里面设置)

4.grid-auto-flow 子元素排序方式

划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是“先行后列即先填满第一行,再开始放入第二行(就是子元素的排放顺序)

5.justify-items(水平方向)/align-items(垂直方向)

控制子项的在单元格内水平对齐方式和垂直对齐方式, 子项的对齐方式

/* 1.子项水平对齐方式 */
justify-items: start | end | center | strech;
/* 2子项垂直齐方式 */
align-items: center;
/* 3.复合属性: justify-items|align-items */
place-itmes: 垂直对齐方式 水平对齐方式;

6.justify-content(水平方向) / align-content(垂直方向)

控制整个内容区域的水平和垂直的对齐方式

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

/* 整体的水平和垂直对齐方式 */
justify-content: center;    
align-content: center;

7.grid-auto-columns / grid-auto-rows

用来设置多出来的项目宽和高

/* 设置多出来的行/列的宽 */
 grid-auto-rows: 50px;

8.总结

属性 值 作用
grid-template-columns 100px 100px 100px; 三列, 每一列100px
grid-template-rows: 100px 100px 100px ; 三行, 每一行100px
grid-template-rows / columns: repeat(5,100px); 参数1:重复的次数 参数2:重复的值
repeat( auto-fill ,100px); 容器没有设置宽高时,可以设为列自适应
repeat(3, 1fr ); fr 分了三列, 每列占三分之一
minmax(150px, 1fr) 最小不会超过150px, 最大不会超过1fr
100px auto100px; 第二个盒子,剩下的宽度自适应
[c1] 100px [c2] 100px [c3] 100px [c4]; 网格线
row-gap 20px; item之间行与行的间距
column-gap 20px; item之间列与列之间的距离
gap 20px; 20px; gap 行于列之间的复合属性
grid-template-areas 'a a a' 'b b b' 'c c c'; 区域的单元格
grid-auto-flow column 子元素排序.方式
justify-items center 控制子项水平与垂直的对齐方式
justify-content center 控制整体的水平和垂直对齐方
grid-auto-rows 50px 设置多出来的行/列的宽

三.子项属性

  1. grid-column-start
  2. grid-column-end
  3. grid-row-start
  4. grid-row-end
  5. gid- column(1和2的简写形式)
  6. grd-roW(3和4的简写形式
  7. grid-area
  8. justity-self
  9. align-self
  10. pace-sef(8和9的简写形式)

1.grid-column-start / grid-column-end

用来指定item的列的网格线,具体位置, 根据在哪跟网格线, 进行排列

/* 网格线从第一根开始 */
grid-column-start: 1;
/* 网格线从第三根开始 */
grid-column-end: 3;
/* 复合属性,从第一根网格线开始,到第三根网格线结束 */
grid-column: 1 / 3;

2.grid-row-start / grid-row-end

用来指定item的行的网格线,具体位置, 根据在哪跟网格线, 进行排列

/* 列网格线: 1-3 */
grid-column: 1 / 3;
/* 复合属性: 行网格线: 1-3 */
grid-row: 1 / 3;

3.grid-area

制定项目放在哪一个区域

/* 容器属性,划分区域 */
grid-template-areas: 'a a a' 'b b b' 'c c c';
/* 子项属性,指定当前子项去哪个区域 */
grid-area: b;
  • grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
grid-area: <row-start>/<column-start>/<row-end>/<column-end>;

4.justify-self / align-self / place=self

justify-self属性设置单元格内容的水平位置（左中右）,跟justify-items属性的用法完全一致，但只作用于单个项目（水平方向） align-self属性设置单元格内容的垂直位置（上中下）,跟align-items属性的用法完全一致，也是只作用于单个项目（垂直方向）

justify-self: start | end | center | strech;
align-self: start | end | center | strech;
  • place-self属性是align-self属性和justify-self属性的合并简写形式 place-self:center center;

5.子项属性总结

属性 作用
grid-column-start: 1; 从列的网格线第一根开始/
grid-column-end: 3; 从列的网格线从第三根结束
grid-column: 1 / 3; 从列的网格线第一根开始到网格线从第三根结束
grid-row: 1 / 3; 从行的网格线第一根开始到网格线从第三根结束
grid-area: b; 指定当前子项去哪个区域, 配合容器的grid-template-areas使用
justify-self: centert; 当前的子项水平居中
align-self: center; 当前子项垂直居中=

本文使用 mdnice 排版

avatar
文章
阅读
粉丝