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-columns
.element { grid-template-columns: 300px 1fr; }
grid-template-rows
.element { grid-template-rows: minmax(auto, 1fr) 3fr; }
grid-template-areas
.element { grid-template-areas: "header header" "sidebar main"; }
语法
grid-template
有多种语法,有不同的形式,但定义为
grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
- 初始值:与简写属性的每个属性相同,对于所有属性都是
none
。 - 应用于:网格容器
- 继承:否
- 计算值:如指定的那样,但对于
grid-template-columns
和grid-template-rows
属性,将相对长度转换为绝对长度。 - 动画类型:简单长度、百分比或 calc 列表,前提是只有长度、百分比或 calc 组件的值在
grid-template-columns
和grid-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-columns
和 grid-auto-rows
属性设置大小。
请注意,grid-template
属性不是创建显式网格轨道的唯一方法。我们还可以使用 grid-template-columns
和 grid-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;
header
、sidebar
、main
和 footer
是网格容器的网格区域的名称。每个字符串中名称的个数指定列的个数(在上面的示例中,每行都是两个)。
列之后的 value — 如上面的 1fr
和 min-content
— 代表每行的 <track-size>
。如果我们没有在行上指定轨道大小,就像上面示例的第一行一样,该行的尺寸将设置为 auto
。
示例的最后一行包含一个正斜杠 (/
),后面跟着两个长度值。这些设置了列的大小。由于每行有两列,我们需要提供两个尺寸。我们将第一列设置为 200px
宽,第二列设置为 1fr
。

基本用法
.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";
}
它有以下结果

它是显式网格属性的简写,而不是隐式属性的简写
grid-template
属性仅将显式网格属性重置为其初始值,它不会对 *隐式* 网格属性(如 grid-auto-columns
、grid-auto-rows
和 grid-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
后跟要对齐的线条编号,而不是像上面那样写 col1
和 col2
。
.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-top
和row1-bottom
- **行 2:** 由于
1fr
,它占用了剩余的空间,网格线命名为content-top
和row2-bottom
。 - **列 1:** 宽
150px
,网格线名称为col1-start
- **列 2:** 占用了剩余的空间,使用
1fr
,并且为线条赋予了两个名称,col2-end
和content-end
有时,插图有助于查看正在发生的事情。

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 网格。就像这样

因此,让我们使用 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);
}
}
浏览器支持
更多信息
- CSS Grid Layout 模块 Level 2
grid-template
简写 (Rachel Andrew)- 使用网格简写来可视化显式 CSS 网格轨道 (thoughtbot)