CSS Grid 布局入门：创建一个简单的网格布局

本文链接：https://blog.youkuaiyun.com/weixin_66708577/article/details/145674478

在现代网页设计中，布局的灵活性和可维护性至关重要。CSS Grid 布局作为一种强大的二维布局工具，能够帮助开发者轻松创建复杂而灵活的页面结构。本文将通过一个简单的示例，带你快速了解 CSS Grid 布局的基本用法，并深入探讨一些高级特性，如 justify-items、align-items、place-items、repeat() 函数、fr 单位以及 grid-row-gap 和 grid-column-gap 的作用。

1. 什么是 CSS Grid 布局？

CSS Grid 布局是一种基于网格的布局系统，它允许我们将页面划分为行和列，从而创建出复杂的布局结构。与传统的布局方式（如浮动布局或 Flexbox）相比，Grid 布局更适合处理二维布局（即同时处理行和列）。它不仅可以精确控制元素的位置，还能通过简单的代码实现复杂的布局效果。

2. 示例：创建一个简单的 Grid 布局

为了更好地理解 CSS Grid 布局，我们通过一个简单的示例来展示其基本用法。以下是一个完整的 HTML 和 CSS 代码示例，我们将创建一个包含 6 个子元素的网格布局。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 布局示例</title>
    <style>
        .container {
            background-color: #2196F3;
            display: grid;
            /* 使用 repeat() 函数定义三列 */
            grid-template-columns: repeat(3, 100px);
            /* 定义两行，高度分别为 50px 和 100px */
            grid-template-rows: 50px 100px;
            /* 分别设置行间距和列间距 */
            grid-row-gap: 120px;