前端CSS-CSS网格布局| “朝闻道”知识分享大赛

这是我参加朝闻道知识分享大赛的第35篇文章。

CSS 网格布局（Grid Layout）是一个功能强大的二维布局系统，允许我们创建复杂的布局结构。以下是网格布局的详细教程，涵盖基础概念、属性、属性值的作用，以及每个知识点的完整 HTML 示例。

1. 网格容器和网格项目

• 定义：一个 HTML 元素在设置 display: grid; 或 display: inline-grid; 后会成为网格容器。

• 作用：启用网格布局模式，容器内的直接子元素（网格项目）将自动成为网格布局的一部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格容器示例</title>
    <style>
        .grid-container {
            display: grid;
            background-color: #f0f0f0;
            padding: 10px;
            gap: 10px;
        }
        .grid-item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
​
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
    </div>
​
</body>
</html>

2. 定义网格的行和列

通过 grid-template-columns 和 grid-template-rows 属性定义网格的列和行。每个列或行可以指定宽度和高度，网格容器会将子元素排列在定义的行和列中。

属性

• grid-template-columns：定义网格容器的列结构。

• grid-template-rows：定义网格容器的行结构。

属性值

• 固定值：px、% 等，例如 100px 表示固定宽度或高度。

• 弹性单位：fr 表示按比例分配剩余空间，例如 1fr 2fr 表示按 1:2 分配。

• auto：自动根据内容决定大小。

• minmax(min, max)：定义最小值和最大值的范围。

• repeat()：简化重复的行或列定义。

3. 网格间距（gap）

gap 属性用于设置网格项目之间的间距，包括行间距（row-gap）和列间距（column-gap）。

属性

• gap：同时设置行间距和列间距。

• row-gap：单独设置行间距。

• column-gap：单独设置列间距。

4. 跨行和跨列（grid-column 和 grid-row）

grid-column 和 grid-row 属性用于控制网格项目跨越的行数和列数。

属性

• grid-column：设置项目跨越的列范围。

• grid-row：设置项目跨越的行范围。

属性值

• start / end：start 指定起始行或列，end 指定结束行或列。

• span：使用 span 表示跨越的列数或行数。

5. 自动布局（auto-fill 和 auto-fit）

使用 auto-fill 和 auto-fit 可以创建自适应的网格布局，网格项目会自动填满容器空间，非常适合响应式设计。

属性

• auto-fill：尽可能多地填充网格单元，允许多余的项目换行。

• auto-fit：填充并压缩空余的网格单元。

示例：自适应网格布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动布局</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
            background-color: #f0f0f0;
            padding: 10px;
        }
        .grid-item {
            background-color: #FFC107;
            color: white;
            padding: 20px;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
​
    <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 class="grid-item">8</div>
    </div>
​
</body>
</html>

6. 区域命名（grid-template-areas 和 grid-area）

使用 grid-template-areas 可以为布局区域命名，结合 grid-area 将网格项目放置在命名区域内。适合于构建复杂布局，如头部、侧边栏、内容和底部。

属性

• grid-template-areas：定义网格容器的布局区域。

• grid-area：指定网格项目的位置，与 grid-template-areas 匹配。

示例：命名区域布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域命名布局</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas:
                "header header header"
                "sidebar content content"
                "footer footer footer";
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto 1fr auto;
            gap: 10px;
            height: 100vh;
            background-color: #f0f0f0;
            padding: 10px;
        }
​
        .header {
            grid-area: header;
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }
​
        .sidebar {
            grid-area: sidebar;
            background-color: #333;
            color: white;
            padding: 20px;
        }
​
        .content {
            grid-area: content;
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ddd;
        }
​
        .footer {
            grid-area: footer;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
​
    <div class="grid-container">
        <div class="header">头部</div>
        <div class="sidebar">侧边栏</div>
        <div class="content">
            <p>这是内容区域。可以容纳文章、图片、视频等内容。</p>
        </div>
        <div class="footer">页脚</div>
    </div>
​
</body>
</html>

7. 小结

以上介绍了网格布局的基础属性和常见用法，包括：

1. 网格行和列：通过 grid-template-columns 和 grid-template-rows 设置列宽和行高。

2. 网格间距：通过 gap、row-gap 和 column-gap 设置行列间距。

3. 跨行跨列：使用 grid-column 和 grid-row 控制项目跨越范围。

4. 自动布局：使用 auto-fill 和 auto-fit 实现响应式布局。

5. 区域命名：通过 grid-template-areas 命名区域，为复杂布局提供便捷的方法。