CSS网格布局Grid

目录

[一、Grid 网格布局](#一、Grid 网格布局)

[1.Grid 布局基础](#1.Grid 布局基础)

2.网格容器属性

3.网格项目属性

4.高级功能

5.典型应用场景

6.最佳实践

二、Flex和Grid对比

示例：

---

一、Grid 网格布局

CSS Grid 是一种强大的二维布局系统，能够以行和列的方式精确控制网页布局。它比传统的布局方式（如浮动、定位）更灵活、更强大，适合构建复杂的响应式网页。

---

1.Grid 布局基础

1. 核心概念

• 网格容器（Grid Container） ：设置 display: grid 的元素。

• 网格项目（Grid Item）：容器的直接子元素。

• 网格线（Grid Line）：划分网格的垂直线和水平线。

• 网格轨道（Grid Track）：行或列的集合。

• 网格单元格（Grid Cell）：行和列的交叉区域。

• 网格区域（Grid Area）：一个或多个单元格组成的矩形区域。

2. 创建网格容器

.container {
  display: grid;  /* 或 inline-grid */
}

---

2.网格容器属性

1. 定义网格轨道

• grid-template-columns：定义列宽和列数。

• grid-template-rows：定义行高和行数。

• 常用值：

  • 固定值：200px、20%。

  • 弹性单位：1fr（剩余空间的分配比例）。

  • 函数：repeat(3, 1fr)（重复 3 列，每列宽度相等）。

  • 范围：minmax(100px, 1fr)（最小 100px，最大 1fr）。

示例：

.container {
  display: grid;
  grid-template-columns: 1fr 300px;  /* 两列：第一列弹性，第二列固定 */
  grid-template-rows: 100px auto;     /* 两行：第一行固定，第二行自适应 */
}

2. 定义网格区域

• grid-template-areas：通过命名区域定义布局。

• 语法：

  • 每行用引号括起来，列之间用空格分隔。

  • 使用 . 表示空白区域。

示例：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

3. 网格间距

• gap ：定义行和列之间的间距（替代 grid-gap）。

• 语法：

  • gap: 10px;（行和列间距均为 10px）。

  • gap: 20px 30px;（行间距 20px，列间距 30px）。

示例：

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

4. 对齐方式

• justify-items ：所有项目的水平对齐方式（start、end、center、stretch）。

• align-items ：所有项目的垂直对齐方式（start、end、center、stretch）。

• justify-content ：整个网格的水平对齐方式（start、end、center、space-between 等）。

• align-content ：整个网格的垂直对齐方式（start、end、center、space-between 等）。

示例：

.container {
  display: grid;
  justify-items: center;  /* 所有项目水平居中 */
  align-items: end;       /* 所有项目垂直底部对齐 */
}

---

3.网格项目属性

1. 项目定位

• grid-column-start：定义项目起始列位置。

• grid-column-end：定义项目结束列位置。

• grid-row-start：定义项目起始行位置。

• grid-row-end：定义项目结束行位置。

• 简写：

  • grid-column: 1 / 3;（从第 1 列到第 3 列）。

  • grid-row: span 2;（占据两行高度）。

示例

2. 项目对齐

• justify-self ：单个项目的水平对齐方式（start、end、center、stretch）。

• align-self ：单个项目的垂直对齐方式（start、end、center、stretch）。

示例：

.item {
  justify-self: center;  /* 水平居中 */
  align-self: start;     /* 垂直顶部对齐 */
}

3. 项目区域

• grid-area ：将项目放入指定区域（对应 grid-template-areas 中的命名区域）。

示例：

.item {
  grid-area: header;  /* 放入名为 header 的区域 */
}

---

4.高级功能

1. 隐式网格

• 当项目超出定义的网格范围时，浏览器会自动创建隐式网格。

• 控制隐式网格：

  • grid-auto-rows：定义隐式行的高度。

  • grid-auto-columns：定义隐式列的宽度。

  • grid-auto-flow：定义项目的排列方向（row、column、dense）。

示例：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100px;  /* 隐式行高为 100px */
  grid-auto-flow: dense;  /* 密集排列 */
}

2. 响应式布局

• auto-fit 和 auto-fill：自动适应列数。

• minmax()：定义列宽或行高的范围。

示例：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

---

5.典型应用场景

1. 网页整体布局：

   .container {
     display: grid;
     grid-template-areas:
       "header header"
       "sidebar main"
       "footer footer";
     grid-template-rows: 80px auto 100px;
     grid-template-columns: 200px 1fr;
   }

2. 卡片网格布局：

   .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
   }

3. 复杂报表布局：

   .container {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(3, 100px);
   }

---

6.最佳实践

1. 命名网格线：

   .container {
     display: grid;
     grid-template-columns: [start] 1fr [middle] 1fr [end];
   }
   .item {
     grid-column: start / middle;
   }

2. 渐进增强：

   @supports (display: grid) {
     .container { display: grid; }
   }

3. 性能优化：

   • 避免过度嵌套网格。

   • 使用 fr 单位代替百分比实现弹性布局。

---

二、Flex和Grid对比

对比维度	Flex	Grid
维度	一维布局（主轴方向）	二维布局（行+列）
定位能力	只能控制单行/列	精确控制行和列的交叉定位
内容驱动	内容优先（根据内容调整布局）	容器优先（先定义网格再填充内容）
嵌套需求	需要多层嵌套实现复杂布局	单层容器即可实现复杂布局
响应式支持	需要媒体查询辅助	内置 auto-fit/minmax() 等响应式功能
浏览器支持	IE10+	IE11+（部分属性不支持）
最佳适用场景	线性排列、组件内部布局	整体页面布局、复杂网格系统

1. 组合使用原则：

   • 使用 Grid 构建宏观布局（页面整体结构）

   • 使用 Flex 处理微观布局（组件内部排列）

2. 响应式设计技巧：

   /* Grid 自动适应列数 */
   .container {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
   
   /* Flex 换行布局 */
   .container {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
   }

3. 性能优化：

   • 避免过度嵌套布局

   • 优先使用 gap 替代 margin 控制间距

   • 使用 fr 单位代替百分比实现弹性布局

4. 兼容性处理：

   /* Flex 兼容旧版语法 */
   .container {
     display: -webkit-flex;
     display: flex;
   }
   
   /* Grid 渐进增强方案 */
   @supports (display: grid) {
     .container { display: grid; }
   }

• Flex 是线性布局的终极解决方案，擅长处理单方向的排列对齐。

• Grid 是二维布局的革命性工具，擅长构建复杂网格系统。

• 现代 Web 开发推荐组合：Grid 搭建骨架，Flex 填充细节。

---

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 布局网页示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 网格容器定义 */
        .container {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr; /* 移动端默认单列 */
            grid-template-rows: auto auto 1fr auto; /* 行定义：header nav main footer */
            grid-template-areas: 
                "header"
                "nav"
                "main"
                "footer";
        }

        /* 公共样式 */
        .header, .nav, .main, .sidebar, .footer {
            padding: 20px;
            border: 1px solid #ddd;
        }

        /* 各区域定位 */
        .header {
            grid-area: header;
            background: #f8f9fa;
        }

        .nav {
            grid-area: nav;
            background: #e9ecef;
        }

        .main {
            grid-area: main;
            background: #fff;
        }

        .sidebar {
            display: none; /* 移动端默认隐藏侧边栏 */
            background: #f1f3f5;
        }

        .footer {
            grid-area: footer;
            background: #212529;
            color: white;
        }

        /* 导航链接布局 */
        .nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        /* 平板及以上设备 */
        @media (min-width: 768px) {
            .container {
                grid-template-columns: 250px 1fr; /* 侧边栏 + 主内容 */
                grid-template-rows: auto auto 1fr auto;
                grid-template-areas: 
                    "header header"
                    "nav nav"
                    "sidebar main"
                    "footer footer";
            }

            .sidebar {
                display: block; /* 显示侧边栏 */
            }
        }

        /* 桌面设备 */
        @media (min-width: 1024px) {
            .container {
                grid-template-columns: 300px 1fr 300px; /* 增加侧边栏宽度 */
                grid-template-areas: 
                    "header header header"
                    "nav nav nav"
                    "sidebar main main"
                    "footer footer footer";
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>网站标题</h1>
            <p>欢迎来到我的网站</p>
        </header>

        <nav class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>

        <aside class="sidebar">
            <h3>侧边栏</h3>
            <p>相关链接或广告内容...</p>
        </aside>

        <main class="main">
            <article>
                <h2>文章标题</h2>
                <p>这里是网页的主要内容区域...</p>
                <!-- 更多内容 -->
            </article>
        </main>

        <footer class="footer">
            <p>&copy; 2024 版权所有</p>
        </footer>
    </div>
</body>
</html>