亲宝软件园·资讯

展开

羊了个羊 Grid布局

前端叭叭说 人气:0

Grid布局中的概念

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

学习grid布局首先要了解一些名词概念的含义

几个函数、单位

有几个grid布局中特有的单位/函数

auto-fill 与 auto-fit的区别

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

其中核心为:grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));意思每个子元素至少需要200px的宽度,如果视口宽度足够就平均分配剩余空间给每个子元素,至于换行问题需要看分配的所有的轨道空间够不够200,如果不够200就换一行,把多的元素换行,比如有580px(不考虑gap),不足以容纳3*200=600,3个子元素,那么就换行,一行两个子元素,那么剩余的80px呢,这就属于剩余空间 ,将(1fr)平均分配给两个轨道。

这里涉及填充模式中的auto-fitauto-fill的区别,auto-fitauto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别,例如容器随着窗口现在有1500px宽度,子元素在一行排列总共需要600px(不考虑gap)。

auto-fitauto-fill首先会尽可能多的创建基于min的200px的轨道宽度,例如创建1500/200=7.5。那么会有7个轨道的200px还剩余了100px的剩余空间,接着会把这100px再次分配到这7个轨道中,100/7=14.28。所以每个轨道的宽度现在为214.28px。到这里auto-fillauto-fit做的事情是一样的:

1.首先尽可能的以最小宽度创建轨道;

2.不足一个轨道的空间,等分给已有的轨道;

接下来:auto-fil auto-fill对空白轨道的处理不同

3.auto-fill 不占用空白轨道,auto-fit把空白轨道均分给有内容轨道;

值得注意的是这种区别是在容器中元素数量元素的最小宽度<容器的总宽度时才会显示看到的差异,如果元素数量最小宽度>容器宽度,那么auto-fillauto-fit展现的效果是一样的

Grid布局和其他布局的区别

网格线编号布局

当你使用网格布局时,编号线总是存在。这些线从 1 开始按行和列编号。

例如:我们定义一个三行三列的布局如下,行和列方向上我们有 4 条线。

  .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
  }

现需要一个网格区域是从最左上角开始,横向占一列,纵向占三行,可以如下写:

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;

grid-columngrid-row可简写如下:

  grid-column: 1/2;
  grid-row: 1/4;

可用默认跨度为1简写如下:

  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;

可用默认跨度为1加上grid-columngrid-row可简写:

  grid-column: 1;
  grid-row: 1/4;

可使用grid-area简写为:

  grid-area: 1/1/4/2;

可使用span表示跨度简写为:

  grid-column: 1;
  grid-row: 1 / span 3;

网格线名称布局

grid-template-rowsgrid-template-columns属性定义网格时,可命名网格线;

.wrap {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [content-end];
}

grid-area命名网格区域,则隐式的创建行列网格线;

例如:

  grid-area: hd;

则隐式的命名网格线: hd-start hd-end

[sidebar-start main-start]可定义网格线的多个名字;

有了网格线名称则可以用来定位布局项目:

.box1 {
  grid-column-start: main-start;
  grid-column-end: main-end;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

网格区域名称布局

使用grid-area命名网格区域,在网格容器内用grid-template-areas指定区域位置:

  .header { grid-area: hd }
  .footer { grid-area: ft }
  .sidebar { grid-area: sb }
  .content { grid-area: main }
  .wrap {
    display: grid;
    grid-template-rows: minmax(100px, auto);
    grid-template-columns: repeat(3 1fr);
    grid-template-areas: 
      "hd hd hd"
      "sb main main"
      "ft ft ft"
  }

使用grid-template可同时设置属性:grid-template-rowsgrid-template-columnsgrid-template-areas

上例可简写:

  .header { grid-area: hd }
  .footer { grid-area: ft }
  .sidebar { grid-area: sb }
  .content { grid-area: main }
  .wrap {
    display: grid;
    grid-template: 
      "hd hd hd" minmax(100px auto)
      "sb main main" minmax(100px auto)
      "ft ft ft" minmax(100px auto)
      / 1fr 1fr 1fr
  }

使用grid可同时设置属性:grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow;注:此属性会把 grid-gap值重置为0;

上例可简写:

  .header { grid-area: hd }
  .footer { grid-area: ft }
  .sidebar { grid-area: sb }
  .content { grid-area: main }
  .wrap {
    display: grid;
    grid: 
      "hd hd hd" minmax(100px auto)
      "sb main main" minmax(100px auto)
      "ft ft ft" minmax(100px auto)
      / 1fr 1fr 1fr
  }

grid-template-areas中留空的单元用句点符'.'占位;

Grid布局轴线对齐

网格布局方式下共有两条轴线用于对齐——块轴(一般垂直方向的)和行轴(内联轴)。块方向的轴是采用块布局时块的排列方向。行轴与块方向的轴垂直,它的方向和常规内联流中的文本方向一致。

对齐元素到块轴的属性是align-items align-self

作用在网格容器上的属性 align-items 的取值有:

作用在网格元素上的属性 align-self 的取值同 align-items

对齐元素到行轴的属性是justify-items justify-self

justify-items作用在网格容器上,justify-self作用在网格元素上,取指同以上两个属性。

place-items 属性是对 align-itemsjustify-items 的简写。

place-self 属性是对 align-selfjustify-self 的简写。

对齐网格轨道到块轴的属性是 align-content

作用在网格容器上,其值有:

对齐网格轨道到行轴的属性是 justify-content

其属性值同align-contentspace-content是对 align-content justify-content的缩写。

布局示例

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
}
.item1 {
  align-self: center;
  justify-self: center;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 200px);
  grid-template-areas:
    ". . . "
    ". a . "
    ". . . ";
}
.item1 {
  grid-area: a;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

加载全部内容

相关教程
猜你喜欢
用户评论