当前位置：首页 > news >正文

CSS 中grid - template - areas属性的作用，如何使用它创建复杂的网格布局？

news 来源：原创 2025/6/8 6:50:12

大白话CSS 中grid - template - areas属性的作用，如何使用它创建复杂的网格布局？

嘿，朋友！今天咱们来聊聊 CSS 里超厉害的 grid-template-areas 属性。这个属性就像是一个神奇的设计师，能让你轻松打造出复杂又酷炫的网格布局。

`grid-template-areas` 属性是干啥的？

想象一下你要布置一个房间，里面有沙发、电视、餐桌这些东西。grid-template-areas 属性就像是一张房间布局图，你可以用它来决定每个家具（也就是网页里的元素）该放在哪儿。简单来说，它能让你通过给网格区域起名字，然后把元素放到这些名字对应的区域里，从而实现复杂的布局。

怎么用 `grid-template-areas` 创建复杂网格布局？

咱们一步步来，先看一个简单的例子，然后再慢慢变复杂。

简单例子：三列布局

/* 选择要应用网格布局的容器元素 */
.container {
    /* 开启网格布局 */
    display: grid;
    /* 定义网格的列宽，这里是三列，每列宽度为 1fr，也就是平均分配容器宽度 */
    grid-template-columns: 1fr 1fr 1fr;
    /* 定义网格的行高，这里是一行，高度为自动 */
    grid-template-rows: auto;
    /* 使用 grid-template-areas 给网格区域命名 */
    grid-template-areas: 
        "left middle right";
}

/* 选择左边的元素 */
.left {
    /* 把这个元素放到名为 left 的网格区域 */
    grid-area: left;
    background-color: lightblue;
}

/* 选择中间的元素 */
.middle {
    /* 把这个元素放到名为 middle 的网格区域 */
    grid-area: middle;
    background-color: lightgreen;
}

/* 选择右边的元素 */
.right {
    /* 把这个元素放到名为 right 的网格区域 */
    grid-area: right;
    background-color: lightcoral;
}

在这个例子里，我们先把 .container 元素设置成网格布局，然后定义了三列，接着用 grid-template-areas 给这三列分别起了名字 left、middle 和 right。最后，把对应的元素放到这些名字对应的区域里。

复杂例子：多行列布局

/* 选择要应用网格布局的容器元素 */
.container {
    /* 开启网格布局 */
    display: grid;
    /* 定义网格的列宽，这里是四列，宽度分别为 1fr、2fr、1fr、1fr */
    grid-template-columns: 1fr 2fr 1fr 1fr;
    /* 定义网格的行高，这里是三行，高度分别为 auto、200px、auto */
    grid-template-rows: auto 200px auto;
    /* 使用 grid-template-areas 给网格区域命名，这里创建了一个复杂的布局 */
    grid-template-areas: 
        "header header header header"
        "sidebar main main aside"
        "footer footer footer footer";
}

/* 选择头部元素 */
.header {
    /* 把这个元素放到名为 header 的网格区域 */
    grid-area: header;
    background-color: lightgray;
}

/* 选择侧边栏元素 */
.sidebar {
    /* 把这个元素放到名为 sidebar 的网格区域 */
    grid-area: sidebar;
    background-color: lightblue;
}

/* 选择主内容元素 */
.main {
    /* 把这个元素放到名为 main 的网格区域 */
    grid-area: main;
    background-color: lightgreen;
}

/* 选择侧边栏元素 */
.aside {
    /* 把这个元素放到名为 aside 的网格区域 */
    grid-area: aside;
    background-color: lightyellow;
}

/* 选择底部元素 */
.footer {
    /* 把这个元素放到名为 footer 的网格区域 */
    grid-area: footer;
    background-color: lightcoral;
}

在这个复杂的例子里，我们创建了一个四列三行的网格布局。通过 grid-template-areas 给不同的区域起了名字，比如 header、sidebar、main、aside 和 footer。然后把对应的元素放到这些区域里，就实现了一个复杂的网页布局。

总结

grid-template-areas 属性就像是一个强大的布局神器，让你可以像搭积木一样轻松创建复杂的网格布局。只要给网格区域起好名字，然后把元素放到对应的区域里，就能打造出你想要的布局效果。快去试试吧，让你的网页布局变得更加酷炫！

除了grid-template-areas属性，还有哪些属性可以用于创建复杂的网格布局？

在 CSS 中，除了 grid-template-areas 属性外，还有不少属性可用于创建复杂的网格布局，下面为你详细介绍：

1. `grid-template-columns` 和 `grid-template-rows`

作用：grid-template-columns 用于定义网格的列轨道尺寸，而 grid-template-rows 用于定义行轨道尺寸。借助这两个属性，你能够精准控制网格的结构。
示例：

.container {
    display: grid;
    /* 定义三列，宽度分别为 200px、1fr、30% */
    grid-template-columns: 200px 1fr 30%;
    /* 定义两行，高度分别为 auto 和 150px */
    grid-template-rows: auto 150px;
}

在这个例子中，容器被划分为三列两行，每列和每行的尺寸都根据设定的规则确定。

2. `grid-column` 和 `grid-row`

作用：grid-column 和 grid-row 是 grid-column-start、grid-column-end、grid-row-start 以及 grid-row-end 的简写属性。它们可用于指定网格项在网格中所占的列和行的范围。
示例：

.item {
    /* 从第 2 列开始，到第 4 列结束 */
    grid-column: 2 / 4;
    /* 从第 1 行开始，到第 3 行结束 */
    grid-row: 1 / 3;
}

这里的 .item 网格项会跨越第 2 列到第 4 列，以及第 1 行到第 3 行。

3. `grid-gap`（`row-gap` 和 `column-gap`）

作用：grid-gap 是 row-gap 和 column-gap 的简写属性，用于设置网格行与行、列与列之间的间距。
示例：

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    /* 行间距为 20px，列间距为 10px */
    grid-gap: 20px 10px;
}

此示例中，网格的行间距为 20px，列间距为 10px。

4. `place-items` 和 `place-content`

作用：place-items 是 align-items 和 justify-items 的简写，用于设置网格项在单元格内的对齐方式；place-content 是 align-content 和 justify-content 的简写，用于设置整个网格内容在网格容器内的对齐方式。
示例：

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    /* 网格项在单元格内水平和垂直居中 */
    place-items: center;
    /* 整个网格内容在容器内水平和垂直居中 */
    place-content: center;
}

在这个例子中，网格项会在各自的单元格内居中显示，整个网格内容也会在容器内居中。

5. `grid-auto-columns` 和 `grid-auto-rows`

作用：当网格项数量超出了 grid-template-columns 和 grid-template-rows 定义的范围时，grid-auto-columns 和 grid-auto-rows 可用于设置自动生成的列和行的尺寸。
示例：

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 自动生成的行高度为 80px */
    grid-auto-rows: 80px;
}

这里，如果有多余的网格项，自动生成的行高度将为 80px。

如何在响应式设计中使用网格布局？

在响应式设计里运用网格布局，能够让网页在不同设备和屏幕尺寸下都呈现出理想的布局效果。下面会从设置基本网格布局、借助媒体查询进行调整、使用弹性单位和函数等方面详细讲解具体的使用方法。

1. 设置基本网格布局

首先要给容器元素开启网格布局，并且设定好基本的列和行。

.container {
    display: grid;
    /* 初始状态下设置三列，每列宽度为 1fr */
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
}

在这个例子中，.container 元素成为了一个网格容器，里面有三列，列与列之间的间距是 10px。

2. 利用媒体查询调整布局

媒体查询可以依据不同的屏幕尺寸来改变网格布局。

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
    .container {
        /* 将列数调整为两列 */
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* 当屏幕宽度小于等于 480px 时 */
@media (max-width: 480px) {
    .container {
        /* 只设置一列 */
        grid-template-columns: 1fr; 
    }
}

上述代码中，当屏幕宽度变小，列数会相应减少，以此适应不同的屏幕尺寸。

3. 使用弹性单位和函数

弹性单位（像 fr、%）和函数（例如 minmax()、repeat()）能让网格布局更具灵活性。

.container {
    display: grid;
    /* 每列最小宽度为 200px，最大宽度为 1fr */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 10px;
}

这里的 auto-fit 会依据容器宽度自动调整列数，minmax(200px, 1fr) 确保每列的最小宽度是 200px，最大宽度会根据可用空间自适应。

4. 结合 `grid-template-areas` 进行响应式布局

grid-template-areas 可用于定义复杂的网格布局，结合媒体查询能实现响应式的复杂布局。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.aside {
    grid-area: aside;
}

.footer {
    grid-area: footer;
}

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "header header"
            "sidebar main"
            "aside aside"
            "footer footer";
    }
}

/* 当屏幕宽度小于等于 480px 时 */
@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "sidebar"
            "main"
            "aside"
            "footer";
    }
}

在这个例子中，随着屏幕宽度的变化，grid-template-areas 重新定义了网格布局，使得各个区域的排列更符合小屏幕的显示需求。

5. 使用 `grid-auto-flow` 控制自动布局

grid-auto-flow 可以控制网格项在网格中的自动排列方式，结合响应式设计能更好地调整布局。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense; /* 紧凑排列 */
    gap: 10px;
}

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row; /* 按行排列 */
    }
}

这里，grid-auto-flow: dense 会让网格项紧凑排列，避免出现空白间隙。在小屏幕下，将其改为 row 按行排列，使布局更规整。

通过上述方法，你可以在响应式设计中灵活运用网格布局，让网页在不同设备上都能有出色的显示效果。下面是完整的代码示例：

/* 通用样式 */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 当屏幕宽度小于等于 480px 时 */
@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;
    }
}

/* 使用弹性单位和函数的样式 */
.container-flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

/* 使用 grid-template-areas 的样式 */
.container-areas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.aside {
    grid-area: aside;
}

.footer {
    grid-area: footer;
}

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
    .container-areas {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "header header"
            "sidebar main"
            "aside aside"
            "footer footer";
    }
}

/* 当屏幕宽度小于等于 480px 时 */
@media (max-width: 480px) {
    .container-areas {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "sidebar"
            "main"
            "aside"
            "footer";
    }
}

/* 使用 grid-auto-flow 的样式 */
.container-auto-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 10px;
}

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
    .container-auto-flow {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
    }
}