有勇气的牛排博客
☰

深入解读 CSS Grid 网格布局：现代网页布局的终极指南（适合新手与高级开发者）

有勇气的牛排 1015 前端 2024-10-21 21:28:51

1 前言

CSS Grid 布局是一种强大而灵活的布局系统，可以让开发者通过简单的 CSS 规则轻松创建复杂的网页布局。

1.1 设备支持支持时间点

Google Chrome: 从 2017 年的版本 57 开始全面支持。

Firefox: 从 2017 年的版本 52 开始支持。

Safari: 从 2017 年的版本 10.1 开始支持。

Microsoft Edge: 从 2017 年的版本 16 开始支持。

Internet Explorer: 仅 IE 11 部分支持，且需要使用旧版语法。

移动端浏览器（如 Chrome for Android、Safari for iOS）也在 2017 年后开始支持。

微信小程序：微信小程序自 2018 年的更新起，已经支持了 display: grid 布局。根据其官方开发文档，绝大多数的现代设备和微信版本都支持这一特性，因此你可以在大部分微信小程序中安全使用 grid 布局。

支付宝小程序：支付宝小程序同样支持 display: grid 布局。不过，某些特定情况下，例如使用 grid 组件嵌套 grid 时，可能会遇到问题，尤其是在 slot 插入组件时。这种情况下可能会导致父子组件之间的关系失效，从而导致布局出错

1.2 容器布局属性（应用于 Grid 容器）

这些属性定义网格的布局方式：

  • display: grid | inline-grid：将一个容器定义为网格容器。
  • grid-template-columns：定义网格的列数和每列的宽度。
  • grid-template-rows：定义网格的行数和每行的高度。
  • grid-template-areas：通过命名区域定义布局。
  • grid-column-gap / grid-row-gap / gap：设置行列之间的间距。
  • grid-auto-columns：为自动生成的列定义宽度。
  • grid-auto-rows：为自动生成的行定义高度。
  • grid-auto-flow：控制自动布局项的填充顺序。
  • justify-items：设置网格项在网格单元中的水平对齐方式。
  • align-items：设置网格项在网格单元中的垂直对齐方式。
  • justify-content：控制整个网格容器在其容器中的水平对齐方式。
  • align-content：控制整个网格容器在其容器中的垂直对齐方式。

1.3 内部元素属性（应用于 Grid 项目）

这些属性定义每个网格项在网格中的行为：

  • grid-column-start / grid-column-end：定义项目在列的起始位置和结束位置。
  • grid-row-start / grid-row-end：定义项目在行的起始位置和结束位置。
  • grid-area：指定网格项的命名区域，或者用来定义该项在网格中的位置。
  • justify-self：设置单个网格项在单元格中的水平对齐方式。
  • align-self：设置单个网格项在单元格中的垂直对齐方式。
  • place-self：同时设置 align-self 和 justify-self。

2 容器布局属性

2.1 display

display: grid;   		/* 构建块级元素 */
display: inline-grid;   /* 构建行内元素 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --grid-gap: 10px; /* 网格间距 */
            --grid-item-height: 50px; /* 网格项高度 */
            --bg-color: #9900FF; /* 背景色 */
            --text-color: white; /* 字体颜色 */
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .grid-container {
            display: grid;
            gap: 5px; /* 设置网格之间的间距 */
        }

        .grid-item {
            height: 30px;
            background-color: var(--bg-color);
            border-radius: 10px;

            /* 内容、文字样式 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-color);
            font-size: 20px;
        }
    </style>
</head>
<body>
<h1><center>有勇气的牛排</center></h1> <!-- 添加标题以提高可读性 -->
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
</div>
</body>
</html>

image.png

2.2 grid-templage-rows 行高 与 grid-template-columns 列属性

定义网格容器中的列布局，即每一列的宽度和数量（按顺序定义每一列的大小）。

语法： grid-template-columns: <track-size> <track-size> ...;

track-size: 指每个列的宽度，可以是：像素px、百分比%、可用空间份额fr、auto。

2.2.1 行高 px指定

<style>
    .grid-container {
        display: grid;
        grid-template-rows: 80px 50px auto;
        gap: 10px;
    }
    .grid-item {
        background-color: var(--bg-color);
        border-radius: 10px;

        /* 内容、文字样式 */
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--text-color);
        font-size: 20px;
    }
</style>

<div class="grid-container">
    <div class="grid-item">1 高80px</div>
    <div class="grid-item">2 高50px</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
</div>

image.png

2.2.2 行高 px与repeat

<style>
    .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 50px) 100px;
        gap: 10px;
    }

    .grid-item {
        background-color: var(--bg-color);
        border-radius: 10px;

        /* 内容、文字样式 */
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--text-color);
        font-size: 20px;
    }
</style>

<div class="grid-container">
    <div class="grid-item">1 重复50px</div>
    <div class="grid-item">2 重复50px</div>
    <div class="grid-item">3 重复50px</div>
    <div class="grid-item">4 指定100px</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
</div>

image.png

2.2.3 列 空间份额 fr

<style>
    .grid-container {
        display: grid;
        /* 指定行高 */
        grid-template-rows: repeat(10, 50px);
        /* 指定列 两列，第一列占1/3，第二列占2/3 */
        grid-template-columns: 1fr 2fr;
        gap: 10px;
    }
</style>

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
</div>

image.png

2.2.4 列 repeat

grid-template-columns: repeat(3, 1fr);

image.png

2.2.5 列 auto-fill 关键字

通常与 repeat() 函数一起使用，可以在创建网格时自动填充尽可能多的列，并根据容器的可用空间动态调整列的数量，从而实现响应式的布局。

语法：grid-template-columns: repeat(auto-fill, <track-size>);

/* 每列宽150px，自动填充尽可能多的列 */
grid-template-columns: repeat(auto-fill, 150px);

2.2.6 列 minmax() 函数

定义最小、嘴大尺寸，适用于响应式，不至于元素过大或过小。

grid-template-columns: repeat(3, minmax(100px, 200px));

2.2.7 列 auto 关键字

.grid-container {
    display: grid;
    grid-template-rows: repeat(10, 50px);
    grid-template-columns: 100px auto 100px;
    gap: 10px;
}

image.png

2.3 网格间距

grid-row-gap 行间距

grid-column-gap：列间距

grid-row-gap: 10px;
grid-column-gap: 20px;

等同于

grid-gap: 10px 20px;

2.4 grid-auto-flow 属性(自动排列)

grid-auto-flow 属性是 CSS Grid布局中的一个属性，用于控制自动放置网格项的顺序和方式。当创建一个网格布局时，有时网格项并不明确放置在特定的网格单元中，grid-auto-flow 就巨鼎了这些未明确指定位置的网格项如何被自动排列。

语法：grid-auto-flow: row | column | dense | row dense | column dense;

row: 默认值，未指定位置的网格项将按行的顺序（从左到右，从上到下）自动放置。
columu: 未指定位置的，从上到下，从左到右。
dense: 启用“紧密填充”，会尝试在先前的空白位置放置网格项，避免空格。
row dense: 按行顺序自动放置，但会尝试紧密填充空白区域。
column dense: 按行顺序自动防止，但会尝试紧密填充空白区域。

2.4.1 按行填充

<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* 三列布局 */
        grid-auto-rows: 100px; /* 每行高度为 100px */
        gap: 10px;

        /* 默认按行填充 */
        grid-auto-flow: row;
    }

    .grid-item {
        background-color: var(--bg-color);
        border-radius: 10px;

        /* 内容、文字样式 */
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--text-color);
        font-size: 20px;
    }
</style>

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
</div>

2.4.2 紧密填充 dense

.grid-container {
    display: grid;
	/* 三列布局 */
    grid-template-columns: repeat(3, 100px); 
	/* 每行高度为 100px */
    grid-auto-rows: 100px; 
    gap: 10px;

    grid-auto-flow: dense;
}

<div class="grid-container">
    <div class="grid-item" style="grid-column: 1 / 3;">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item" style="grid-column:  1 / 3;">33</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
</div>

image.png

2.5 justify-items 、align-items 、 place-items 属性

2.5.1 justify-items

start: 对齐单元格的起始边缘。

end: 对齐单元格的结束边缘。

centet: 单元格内部中间。

stretch: 拉伸，沾满单元格的整个宽度（默认值）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .grid-container, .grid-container2, .grid-container3, .grid-container4 {
            display: grid;
            grid-template-columns: 100px 200px 100px;
            grid-gap: 5px;
            grid-auto-rows: 50px;
            justify-items: start;

            border: 1px solid blue;
            margin-bottom: 10px;
            font-size: 20px;
        }

        .grid-container2 {
            justify-items: end;
        }

        .grid-container3 {
            justify-items: center;
        }

        .grid-container4 {
            justify-items: stretch;
        }
        p {
            font-size: 20px;
            font-weight: 800;
        }

    </style>
</head>
<body>
<p>justify-items: start;</p>
<div class="grid-container">
    <div class="grid-item" style="background-color: #66FFCC">1</div>
    <div class="grid-item" style="background-color: #990000">2</div>
    <div class="grid-item" style="background-color: #9900FF">3</div>
    <div class="grid-item" style="background-color: #996633">4</div>
    <div class="grid-item" style="background-color: #9966CC">5</div>
    <div class="grid-item" style="background-color: #99FF00">6</div>
    <div class="grid-item" style="background-color: #CC0099">7</div>
    <div class="grid-item" style="background-color: #CC6600">8</div>
    <div class="grid-item" style="background-color: #FF00FF">9</div>
</div>
<p>justify-items: end;</p>
<div class="grid-container2">
    <div class="grid-item" style="background-color: #66FFCC">1</div>
    <div class="grid-item" style="background-color: #990000">2</div>
    <div class="grid-item" style="background-color: #9900FF">3</div>
    <div class="grid-item" style="background-color: #996633">4</div>
    <div class="grid-item" style="background-color: #9966CC">5</div>
    <div class="grid-item" style="background-color: #99FF00">6</div>
    <div class="grid-item" style="background-color: #CC0099">7</div>
    <div class="grid-item" style="background-color: #CC6600">8</div>
    <div class="grid-item" style="background-color: #FF00FF">9</div>
</div>
<p>justify-items: center;</p>
<div class="grid-container3">
    <div class="grid-item" style="background-color: #66FFCC">1</div>
    <div class="grid-item" style="background-color: #990000">2</div>
    <div class="grid-item" style="background-color: #9900FF">3</div>
    <div class="grid-item" style="background-color: #996633">4</div>
    <div class="grid-item" style="background-color: #9966CC">5</div>
    <div class="grid-item" style="background-color: #99FF00">6</div>
    <div class="grid-item" style="background-color: #CC0099">7</div>
    <div class="grid-item" style="background-color: #CC6600">8</div>
    <div class="grid-item" style="background-color: #FF00FF">9</div>
</div>
<p>justify-items: stretch;</p>
<div class="grid-container4">
    <div class="grid-item" style="background-color: #66FFCC">1</div>
    <div class="grid-item" style="background-color: #990000">2</div>
    <div class="grid-item" style="background-color: #9900FF">3</div>
    <div class="grid-item" style="background-color: #996633">4</div>
    <div class="grid-item" style="background-color: #9966CC">5</div>
    <div class="grid-item" style="background-color: #99FF00">6</div>
    <div class="grid-item" style="background-color: #CC0099">7</div>
    <div class="grid-item" style="background-color: #CC6600">8</div>
    <div class="grid-item" style="background-color: #FF00FF">9</div>
</div>

</body>
</html>

image.png

2.5.2 align-content

与justify-items同理，方向为垂直方向。

3 内部元素属性

3.1 grid-area 定义区域

3.1.1 固定布局

如果单元没有内容，则用点号代替。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有勇气的牛排 语义化的 Grid 布局示例</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: black;
        }

        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-areas:
                    "header header header"
                    "sidebar main aside"
                    "footer footer footer";
            gap: 10px;
        }

        header {
            grid-area: header;

            background-color: #ff6666;
            padding: 20px;
            text-align: center;
            color: white;
            font-size: 24px;
        }

        nav {
            grid-area: sidebar;

            background-color: #66ccff;
            padding: 20px;
            color: white;
        }

        main {
            grid-area: main;

            background-color: #99ff99;
            padding: 20px;
            color: white;
        }

        article {
            background-color: rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 5px;
        }

        aside {
            grid-area: aside;

            background-color: #ff99ff;
            padding: 20px;
            color: white;
        }

        footer {
            grid-area: footer;

            background-color: #ffcc66;
            padding: 20px;
            text-align: center;
            color: white;
            font-size: 18px;
        }


    </style>

</head>
<body>

<div class="grid-container">
    <!-- 页眉 -->
    <header>
        有勇气的牛排博客
    </header>

    <!-- 侧边导航 -->
    <nav>
        <ul>
            <li><a href="#" style="color:white;">链接 1</a></li>
            <li><a href="#" style="color:white;">链接 2</a></li>
            <li><a href="#" style="color:white;">链接 3</a></li>
        </ul>
    </nav>

    <!-- 主要内容 -->
    <main>
        <article>
            <h2>文章标题 1</h2>
            <p>这是文章 1 的内容。语义化标签使页面更具结构性和可读性。</p>
        </article>
    </main>

    <!-- 侧边栏 -->
    <aside>
        侧边栏
    </aside>

    <!-- 页脚 -->
    <footer>
        &copy; 2024 有勇气的牛排
    </footer>

</div>

</body>
</html>

image.png

2.1.2 响应式布局

有勇氣的牛排創作：
https://www.couragesteak.com/article/487

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式 Grid 布局示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .grid-container {
            display: grid;
            gap: 10px;
            padding: 10px;
            height: 100vh;
            grid-template-areas:
                "header"
                "main"
                /*"aside"*/
                /*"sidebar"*/
                "footer";
        }

        header {
            grid-area: header;
            background-color: #ff6666;
            padding: 20px;
            text-align: center;
            color: white;
            font-size: 24px;
        }

        aside {
            grid-area: aside;
            display: none;
            background-color: #ff99ff;
            padding: 20px;
            color: white;
        }

        main {
            grid-area: main;
            background-color: #99ff99;
            padding: 20px;
            color: white;
        }

        footer {
            grid-area: footer;
            background-color: #ffcc66;
            padding: 20px;
            text-align: center;
            color: white;
            font-size: 18px;
        }

        nav {
            grid-area: sidebar;
            display: none;
            background-color: #66ccff;
            padding: 20px;
            color: white;
        }

        article {
            background-color: rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 5px;
        }

        /* 响应式设计 */
        /* 针对平板 */
        @media (min-width: 600px) {
            .grid-container {
                grid-template-columns: 1fr 2fr 1fr;
                grid-template-rows: auto 1fr auto;
                grid-template-areas:
                    "header header header"
                    "main main aside"
                    "footer footer footer";
            }

            footer {
                font-size: 16px;
            }

            /*nav {*/
            /*    display: block;*/
            /*}*/

            aside {
                display: block;
            }
        }

        /* 针对PC大屏 */
        @media (min-width: 1024px) {
            .grid-container {
                grid-template-columns: 1fr 2fr 1fr;
                grid-template-rows: auto 1fr auto;
                grid-template-areas:
                    "header header header"
                    "sidebar main aside"
                    "footer footer footer";
            }

            header {
                font-size: 30px;
            }

            footer {
                font-size: 20px;
            }

            nav {
                display: block;
            }

            aside {
                display: block;
            }
        }
    </style>
</head>
<body>

<div class="grid-container">
    <!-- 页眉 -->
    <header>
        有勇气的牛排博客
    </header>

    <!-- 侧边导航 -->
    <nav>
        <ul>
            <li><a href="#" style="color:white;">链接 1</a></li>
            <li><a href="#" style="color:white;">链接 2</a></li>
            <li><a href="#" style="color:white;">链接 3</a></li>
        </ul>
    </nav>

    <!-- 主要内容 -->
    <main>
        <article>
            <h2>文章标题 1</h2>
            <p>这是文章 1 的内容。语义化标签使页面更具结构性和可读性。</p>
        </article>

        <article>
            <h2>文章标题 2</h2>
            <p>这是文章 2 的内容。使用语义化标签能够提高 SEO 排名。</p>
        </article>
    </main>

    <!-- 侧边栏 -->
    <aside>
        <h3>附加内容</h3>
        <p>这里可以是附加的文章或广告信息。</p>
    </aside>

    <!-- 页脚 -->
    <footer>
        &copy; 2024 有勇气的牛排
    </footer>
</div>

</body>
</html>

image.png

4 案例

4.1 基础案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有勇气的牛排 CSS Grid宫格 示例</title>
    <style>
        :root {
            --grid-gap: 10px; /* 网格间距 */
            --grid-item-height: 50px; /* 网格项高度 */
            --bg-color: #9900FF; /* 背景色 */
            --text-color: white; /* 字体颜色 */
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px; /*设置网格之间的间距*/
            padding: 10px;
        }

        .grid-item {
            height: 150px;
            background-color: var(--bg-color);
            border-radius: 10px;

            /* 内容、文字样式 */
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-color);
            font-size: 20px;
        }


        /* 响应式设计 */
        @media (max-width: 900px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr); /* 小屏幕上使用 2 列 */
            }
        }


    </style>
</head>
<body>
<h1>有勇气的牛排</h1> <!-- 添加标题以提高可读性 -->
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
</div>
</body>
</html>

image.png

image.png

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流