CSS grid 属性 - 绿叶网

CSS grid 语法

在 CSS 中，grid 属性是一个复合属性（也叫 “简写属性”），它用于同时设置多个与 Grid 布局相关的属性，包括：

语法：

grid: <grid-template> | <grid-row-size> / <grid-column-size> | none;

说明：

对于 <grid-template> 来说，它等同于使用 grid-template 这个简写属性。

它允许同时设置 grid-template-rows、grid-template-columns 和 grid-template-areas。
同时，它会将 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 重置为它们的初始值（auto 和 row）。
grid-template: none; 等同于分别将 grid-template-rows、grid-template-columns 和 grid-template-areas 都设置为它们的默认值 none 。

而对于 <grid-row-size> / <grid-column-size> 来说：

当使用这种方式时，grid-template-columns 会被设置为 <grid-column-size> 的值。
grid-template-rows 会被设置为 <grid-row-size> 的值。
grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 也会被重置为它们的初始值。

此外，grid 属性的默认值是 none，表示不设置任何显式网格行、列或区域。

注意:

grid 属性只能用于网格容器自身，即定义了 display 取值为 grid 或 inline-grid 的元素。
虽然使用 grid 属性可以一次性定义显式网格的行、列、区域以及隐式网格的行为，但在实际开发中，我们很少会使用 grid 这个复合属性，而更多的是使用它的子属性。

CSS grid 摘要

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

CSS grid 示例

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

示例 1：grid 实现经典三明治布局

运行代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container {
                display: grid;
                /* 这里使用 grid 简写属性，用法与 grid-template 一致：
                   1. 定义区域和行高 (header 80px, nav/main/aside 1fr, footer 60px)
                   2. 定义列宽 (/ 120px 1fr 150px)
                */
                grid:
                    "header header header" 80px
                    "nav    main   aside"  1fr
                    "footer footer footer" 60px
                    / 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 示例（1）

分析：

在这个例子中，我们使用 grid 属性实现了一个包含页头、导航、主内容、侧边栏和页脚的 3x3 布局。

grid:
    "header header header" 80px
    "nav    main   aside"  1fr
    "footer footer footer" 60px
    / 120px 1fr 150px;

实际上，上面代码等价于：

grid-template-areas: 
    "header header header"
    "nav    main   aside"
    "footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 120px 1fr 150px;

/* 注意：grid 简写属性还会强制重置以下隐式属性为初始值 */
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-auto-flow: row;

示例 2：使用 grid 快速创建自动排列网格

运行代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container {
                display: grid;
                width: 400px;
                border: 2px solid #333;
                padding: 10px;
                gap: 10px;
                
                grid: auto-flow dense 100px / repeat(3, 1fr);
            }
            .item {
                background-color: #e0e0e0;
                border: 1px solid #999;
                padding: 20px;
                text-align: center;
                font-size: 1.5em;
            }
            .item:nth-child(even) {
                background-color: #b0c4de;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            </div>
    </body>
</html>

页面效果如下图所示。

grid 示例（2）

分析：

对于这个例子来说，grid: auto-flow dense 100px / repeat(3, 1fr); 其实等价于以下代码：

/* 1. 设置隐式网格的流动方向和填充方式 */
grid-auto-flow: row dense;

/* 2. 设置隐式创建的行的高度 */
grid-auto-rows: 100px;

/* 3. 设置显式列的宽度 */
grid-template-columns: repeat(3, 1fr);

/* --- 简写属性强制重置的属性 --- */
grid-template-rows: none;    /* 不设置显式行 */
grid-template-areas: none;   /* 不设置区域 */
grid-auto-columns: auto;     /* 重置隐式列宽为默认值 */