网格区域 (Grid Areas)

网格区域是一个逻辑空间,主要用来放置一个或多个网格项目。他有四条网格线,网格区域每边一条,四边相交组织的网格轨道可以调整网格区域大小。

grid-areagrid-rowgrid-column 的组合属性

grid-area: 2 / 2 / 3 / 3;

grid-area 的设置规则:

指定四个值,第一个值对应 grid-row-start,第二个值对应 grid-column-start,第三个值对应 grid-row-end 和第四个值对应 grid-column-end

网格区域命名

像网格线名称一样,网格区域的名称也可以使用grid-template-areas属性来命名。引用网格区域名称也可以设置网格项目位置。

grid-template-areas:
  "header header"
  "content sidebar"
  "footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;

设置网格区域的名称应该放置在单引号或双引号内,每个名称由一个空格符分开。

网格区域的名称,每组(单引号或双引号内的网格区域名称)定义了网格的一行,每个网格区域名称定义网格的一列。

通过网格区域命名来定位网格项目

也可直接通过命名的网格区域指定网格项目所在的位置。

使用 grid-row-startgrid-row-endgrid-column-startgrid-column-end 可以引用网格区域名称,用来设置网格项目位置。

grid-row-start: header;
grid-row-end: header;
grid-column-start: header;
grid-column-end: header;

可以使用简写:

grid-row: footer;
grid-column: footer;

grid-area简写属性也可以引用网格区域的名称来设置网格项目的位置。

grid-area: header;

如果使用 grid-template 属性为网格容器设置的网格区域,此时设置 grid-template-rowsgrid-template-columns 将无效。

<div class='demo1'>
  <div class='container'>
    <div class='items'>
      <div class='item'>header</div>
      <div class='item'>content</div>
      <div class='item'>sidebar</div>
      <div class='item'>footer</div>
    </div>
  </div>
</div>
.demo1
  .container
    .items
      grid-template "header header" "content sidebar" "footer footer"
      .item
        &:nth-child(1)
          grid-area header
        &:nth-child(2)
          grid-area content
        &:nth-child(3)
          grid-area sidebar
        &:nth-child(4)
          grid-area footer
header
content
sidebar
footer

隐式地命名网格区域名称

通常可以将网格线命名成任何你想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置。

grid-template-rows: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];

在这个示例中,行和列都具有 inner-startinner-end 网格线名称,同时也对应的创建一个隐式网格区域名称 inner

grid-area: inner;

网格项目定位可以通过网格区域名称来设置,而不需要使用网格线名称。

隐式命名网格线名称

隐式的指定网格线反向指定了隐式的网格区域名称,命名的网格区域隐式的命名了网格线名称。

grid-template-areas:
  "header header"
  "content sidebar"
  "footer footer";
grid-template-rows: 80px 1fr 40px;
grid-template-columns: 1fr 200px;

指定网格区域会给网格区域边线添加隐式的网格线名称。这些网格线的命名是基于网格区域来命名,只是在网格区域名称的后面添加后缀 -start-end

grid-row-start: header-start;
grid-row-end: content-start;
grid-column-start: footer-start;
grid-column-end: sidebar-end;

在这个示例中,header通过隐式的网格线名称设置其位置。


MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress