grid-template

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

grid-template CSS 属性是一个简写属性,允许您使用一个声明来定义 CSS 网格容器中的网格列、行和区域。

.grid-container {
  display: grid;
  grid-template:
    "header  header"
    "sidebar main"   1fr
    "footer  footer" min-content
    / 250px   1fr;
}

组成属性

如前所述,grid-template 是一个简写属性,它组合了多个属性。你问是哪些属性?这三个是

语法

grid-template 有多种语法,有不同的形式,但定义为

grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
  • 初始值:与简写属性的每个属性相同,对于所有属性都是 none
  • 应用于:网格容器
  • 继承:
  • 计算值:如指定的那样,但对于 grid-template-columnsgrid-template-rows 属性,将相对长度转换为绝对长度。
  • 动画类型:简单长度、百分比或 calc 列表,前提是只有长度、百分比或 calc 组件的值在 grid-template-columnsgrid-template-rows 中列表不同,并且 grid-template-areas 是离散的。

/* Keyword value */
grid-template: none;
grid-template: "col-1 col-2 col-3";
grid-template: "header header header" "sidebar main main";
grid-template:
  "header header header"
  "sidebar main main"
  ". footer footer";

/* grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 300px 1fr;
grid-template: min-content 1fr / 200px 1fr 200px;
grid-template: [line1] 100px / [sidebar] 250px [content] 1fr;
grid-template: repeat(4, auto) / repeat(4, minmax(100px, 1fr));

/* grid-template-areas grid-template-rows / grid-template-column values */
grid-template:
  "header header"
  "sidebar main"
  "footer footer";
grid-template:
  "header header header" min-content
  "main main main" 1fr;
grid-template:
  [row1-top] "header header" 100px [row1-bottom]
  "sidebar main" 1fr [row2-bottom] / [col1-start] 300px [col1-end] 1fr;

/* Global values */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: unset;

none

这是默认值。none 将所有三个属性设置为其初始值,这意味着没有命名的网格区域,也没有此属性在网格容器上定义的显式网格轨道。这也意味着 网格轨道是隐式生成的,并且由 grid-auto-columnsgrid-auto-rows 属性设置大小。

请注意,grid-template 属性不是创建显式网格轨道的唯一方法。我们还可以使用 grid-template-columnsgrid-template-rows 属性来实现。

<'grid-template-rows'> / <'grid-template-columns'>

这种形式的 grid-template 语法在一个声明中定义网格容器上的行和列,同时将 grid-template-areas 值设置为 none。我们在它们之间使用斜杠 / 分隔值,如下所示

.grid-container {
  display: grid;
  grid-template: min-content 1fr / 200px 1fr 200px;
}

…这等同于在没有简写的情况下编写它

.grid-container {
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas: none;
}

顺序很重要。斜杠之前的 value 设置 grid-template-rows,而斜杠之后的 value 设置 grid-template-columns 属性。

以下是一个将显式行名称用于网格的另一个示例

/* One row of 100px and two columns of 250px and 1fr: */
.grid-container {
  display: grid;
  grid-template: [line1] 100px / [sidebar] 250px [content] 1fr;
}

…这再次等同于在没有简写的情况下这样写它

.grid-container {
  display: grid;
  grid-template-rows: [line1] 100px;
  grid-template-columns: [sidebar] 250px [content] 1fr;
  grid-template-areas: none;
}

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

grid-template 属性还接受一种语法,让我们可以同时显式指定网格列、行和区域。

grid-template:
  "header  header"
  "sidebar main"   1fr
  "footer  footer" min-content
  / 200px   1fr;

headersidebarmainfooter 是网格容器的网格区域的名称。每个字符串中名称的个数指定列的个数(在上面的示例中,每行都是两个)。

列之后的 value — 如上面的 1frmin-content — 代表每行的 <track-size>。如果我们没有在行上指定轨道大小,就像上面示例的第一行一样,该行的尺寸将设置为 auto

示例的最后一行包含一个正斜杠 (/),后面跟着两个长度值。这些设置了列的大小。由于每行有两列,我们需要提供两个尺寸。我们将第一列设置为 200px 宽,第二列设置为 1fr

Diagram highlighting parts of a grid-template declaration.
行上的长度值设置该行的高度。斜杠之后的最后一行上的 value 设置了列的宽度。

基本用法

.grid {
  display: grid;
  gap: 1rem;
  grid-template: "header  header"
                  "sidebar main"   1fr
                  "footer  footer" min-content
                / 200px   1fr;
}

上面的代码等同于以下代码

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr min-content;
  grid-template-areas: "header header"
                        "sidebar main"
                        "footer footer";
}

它有以下结果

A webpage layout created with grid-template property

它是显式网格属性的简写,而不是隐式属性的简写

grid-template 属性仅将显式网格属性重置为其初始值,它不会对 *隐式* 网格属性(如 grid-auto-columnsgrid-auto-rowsgrid-auto-flow)产生任何影响,为此,还有另一种名为 grid 的简写,它具有相同的语法,但还会重置隐式网格属性。

以下是将 grid-template 属性设置为 none 时发生的情况

grid-template: none;

/* is equivalent to: */
grid-template-rows: none;
grid-template-columns: none;
grid-template-areas: none;

定义网格线有很多方法

命名网格线 是一种常见的简化书写方式,但有多种方法可以实现。一种方法是为每条线赋予多个名称,这样就可以将线条视为具有起始线和结束线。

.grid {
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}

CSS Grid 的一个很酷的功能是它会为我们自动编号。这意味着在将网格项目放置到网格容器的线上时,我们可以省略数字。因此,我们可以直接写 col 后跟要对齐的线条编号,而不是像上面那样写 col1col2

.grid-item {
  grid-column-start: col 2;
}

当我们在具有 *很多* 列的网格上使用此技巧时,它会更加酷炫。

.grid {
  grid-template-columns: repeat(4, [col] 100px);
}

现在我们有四列,每列宽 100px,并且具有自动编号的 col 命名网格线,我们可以使用它将项目放置在网格上。

.grid-item {
  grid-column: col 2 / col 4;
}

当然,我们还有 span 关键字,这意味着我们可以进一步简化事情。

.grid-item {
  grid-column: col 2 / span 2;
}

以下示例中,我们有两条网格线。line-1 是第一行和第二行之间的网格线,line-2 是第二行和最后一行之间的网格线。

grid-template:
  "header  header"
  [line-1] "sidebar main" 1fr [line-2]
  "footer  footer" min-content
/ 200px   1fr;

我们还可以设置列之间网格线的大小。

grid-template:
  [row1-top]    "header  header" 100px [row1-bottom]
  [content-top] "sidebar main"   1fr [row2-bottom]
/ [col1-start]  150px    1fr     [col2-end content-end];

注意,使用空格可以帮助使代码更易于阅读,方法是将每行中的列对齐。

  • **行 1:** 高 100px,网格线命名为 row1-toprow1-bottom
  • **行 2:** 由于 1fr,它占用了剩余的空间,网格线命名为 content-toprow2-bottom
  • **列 1:** 宽 150px,网格线名称为 col1-start
  • **列 2:** 占用了剩余的空间,使用 1fr,并且为线条赋予了两个名称,col2-endcontent-end

有时,插图有助于查看正在发生的事情。

Demonstrating grid lines and areas in a grid layout created with grid-template property.

使用 repeat() 函数时要谨慎

它不是为配合 grid-template 属性而设计的!这样做的目的是 repeat() 会妨碍整齐书写,因为所有内容都可以用空格对齐,就像网格的简单可视化一样。

.grid {
  display: grid;
  grid-template: "header  header"
                  "sidebar main"   1fr
                  "footer  footer" min-content
                / 200px   1fr;
}

演示

让我们使用 grid-template 属性为网页创建一个响应式布局。首先,为单列中的一堆项目设置一些默认的 CSS Grid。

/* Define the grid */
.grid {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "left-sidebar"
    "right-sidebar"
    "footer";     
  gap: 1rem;
}

/* Place the items on the grid */
header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left-sidebar;
}

.right-sidebar {
  grid-area: right-sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

不错,不错。但我们真正想要的是在更大的屏幕上使用 3⨉3 网格。就像这样

Demonstrating a layout created with grid-template shorthand property.

因此,让我们使用 grid-template 在媒体查询中创建该布局。

@media (min-width: 600px) {
  .grid {
    grid-template:
      "header             header             header"         min-content
      "left-sidebar       main               right-sidebar"  1fr
      "footer             footer             footer"         min-content
    / minmax(auto, 250px) minmax(250px, 1fr) minmax(auto, 250px);
  }
}

浏览器支持

更多信息