Blogger Information
Blog 16
fans 0
comment 0
visits 13201
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
详说grid布局
小雨丶
Original
1205 people have browsed it

grid布局

grid一般用来布局整体轮廓;
子元素格式默认是block;(flex默认是inline)
方式:

  1. display:grid;

设置列:

  1. 一个grid-template-columns代表一行;
  2. grid-template-columns:auto;
  3. grid-template-columns: 10em 10em 10em;//一行三列,10em是列的宽度

行高:

  1. grid-template-rows: 5em 5em;//有两行,每行的行高是5em;

轨道间距:(只有行列之间的间距,行列的外边是没有的)

  1. gap: 行间距 列间距;
  2. gap: 0.4em 0.5em;//行间距是0.4em,列间距是0.5em
  3. gap: 0.5em 0.5em;可以简写成gap: 0.5em;

网格布局grid中的单位fr(fraction,类似flex中的伸缩因子)

fr倍数

  1. grid-tempalte-columns: 1fr 2fr 1fr;//三列,中间是两遍的二倍宽度

%百分比单位与fr共用(尽量不要同时用)

  1. grid-tempalte-columns: 20% 1fr 20%;//中间1fr的宽度是自适应的

%单位与fr共用的案例说明,fr单位不是固定值,是一种比例单位,跟其他数值类型单位共用时候,先减去数值类型单位的数值,剩下的按fr比例分配。 fr是比例单位,auto 是自适应数值,两者不要同时用:

  1. grid-template-columns: 1fr auto 1fr;//这样auto不知道自适应多少数值,因为fr是一种比例距离。

grid常用函数方式

repeat(重复次数,宽度数值,宽度数值)
  1. repeat 将宽度数值重复
  2. //三列,每列宽度是10em;
  3. grid-tempalte-columns: repeat(3,10em);
  4. //一列10em一列3em,重复三次,共6列
  5. grid-tempalte-columns: repeat(3,10em,3em);

repeat与数值的混合使用

  1. grid-tempalte-columns: repeat(2,1fr) 2fr;//前两列是1fr,最后一个是2fr
minmax(最小值,最大值)
  1. grid-tempalte-columns: 1fr minmax(20em, 2fr) 1fr);
  2. 左右两列是1fr,中间一列最小值是20em,最大按fr比例是2fr;
超出部分排列顺序
  1. 按行排列(超出部分创建行排列)
  2. grid-auto-flow:row;
  3. grid-auto-rows: 5em;//超出布局的行的行高为5em;
  4. 按列排列(超出部分创建列排列)
  5. grid-auto-flow:column;
  6. grid-auto-column: 5em;//超出布局的列的宽度为5em;
网格操作grid-area

网格坐标从左上角开始为1,1,到右下角的方向/相反则为负数

  1. //选中要操作的网格
  2. grid-area: 起始行 / 起始列 / 结束行 / 结束列;
  3. grid-area: 2 / 2 / 3 / 3;
  4. //放到坐标位置
  5. grid-area: 1 / 1 / 2 / 2;
  6. //默认项目是一行一列
  7. grid-area: 1 / 1;
  8. 如果要跨1行或1列以上,就不能省略
  9. //用span表示跨越的行数或列数
  10. grid-area: 1 / 1 / span 2 / span 3;
  11. 当前位置可以省略
  12. grid-area: span 1 / span 3;
  13. 如果省略行:grid-area: auto / span 3;//默认是1行
  14. 只写一个grid-area: span 3;选中的是一列的三行,因为行与列的默认值都是1
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post