CSS grid-template 属性

CSS grid-template 语法

在 CSS 中，grid-template 属性是一个复合（简写）属性，它用于同时设置以下 3 个属性：

语法：

grid-template: none | 取值;

说明：

grid-template 属性默认值是 none，表示不设置任何显式网格行、列或区域。grid-template: none; 等同于分别将 grid-template-rows、grid-template-columns 和 grid-template-areas 都设置为它们的默认值 none。

如果使用 grid-template 简写属性时，它会重置 grid-template-rows、grid-template-columns 和 grid-template-areas 到你指定的值，并将 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 重置为它们的初始值 (auto 和 row)。因此，在使用 grid-template 时，通常不需要再单独设置这些自动网格属性。

由于 grid-template 属性的取值比较特殊，建议参考下方例子来理解。

注意: grid-template 属性只能用于网格容器自身，即定义了 display 取值为 grid 或 inline-grid 的元素。

CSS grid-template 摘要

属于	CSS grid 布局
使用频率	中
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看

CSS grid-template 示例

接下来，我们通过一个简单的例子来讲解一下 CSS grid-template 属性是如何使用的。

示例：grid-template 实现经典三明治布局（页眉 - 内容 - 页脚）

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            display: grid;
            grid-template:
                "header header header" 80px   /* 定义第一行：具名区域 'header'，行高 80px */
                "nav    main   aside"  1fr    /* 定义第二行：具名区域 'nav' 'main' 'aside'，行高 1fr (弹性) */
                "footer footer footer" 60px   /* 定义第三行：具名区域 'footer'，行高 60px */
                / 120px 1fr 150px;            /* 定义列：第一列 120px，第二列 1fr，第三列 150px */
            gap: 10px;
            width: 700px;
            height: 500px;
            border: 2px solid #3498db;
            background-color: #ecf0f1;
            padding: 10px;
        }
        .container > div {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2em;
            color: white;
            border-radius: 5px;
            padding: 10px;
        }
        /* 使用 grid-area 将子项放置到具名区域 */
        .header { grid-area: header; background-color: #2ecc71; }
        .nav { grid-area: nav; background-color: #e74c3c; }
        .main { grid-area: main; background-color: #f1c40f; }
        .aside { grid-area: aside; background-color: #3498db; }
        .footer { grid-area: footer; background-color: #9b59b6; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">页头</div>
        <div class="nav">导航</div>
        <div class="main">主内容</div>
        <div class="aside">侧边栏</div>
        <div class="footer">页脚</div>
    </div>
</body>
</html>

页面效果如下图所示。

grid-template 实现三明治布局

分析：

对于 grid-template 来说，"header header header" 80px 定义了第一行，它跨越所有三列，并命名为 header 区域，行高为 80px。类似地，第二行定义了 nav、main、aside 区域，行高为 1fr。第三行定义了 footer 区域，行高为 60px。在 “/” 之后，120px 1fr 150px 定义了三列的宽度。

grid-template 这种写法将网格的行、列和区域定义集中在一起，形成了布局的 “可视化地图”，大大提高了代码的可读性和维护性。