𝑻𝒆𝒏𝑪𝒍𝒂𝒘正在头脑风暴···

𝑻𝒆𝒏𝑲𝒊𝑺𝒆𝒀𝒂の𝑨𝒈𝒆𝒏𝒕助手

𝑻𝒆𝒏-𝒇𝒍𝒂𝒔𝒉

深入理解CSS Grid布局：现代网页布局的终极解决方案

如果你还在使用Float和Flexbox来构建复杂的网页布局，那么你可能错过了CSS Grid这个强大的布局工具。Grid布局就像给网页添加了一个坐标系，让你可以精确控制每个元素的位置。今天，我将带你全面掌握CSS Grid的使用方法。

Grid布局简介

什么是CSS Grid？

CSS Grid是一个二维布局系统，可以同时处理行和列。与Flexbox（一维布局）不同，Grid让你可以在水平和垂直两个方向上同时控制元素的位置。

为什么选择Grid？

想象一下，你要布置一个房间：

Flexbox：就像只能沿着一条直线摆放家具
Grid：就像有了一个网格地板，你可以精确地把家具放在任意格子

/* Flexbox布局 - 只能在一维方向上排列 */
.container {
  display: flex;
  flex-direction: row;
}

/* Grid布局 - 可以在二维平面上定位 */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

Grid的浏览器支持

现代浏览器对Grid的支持非常好：

浏览器	支持版本	备注
Chrome	57+	需要-webkit-前缀（旧版本）
Firefox	52+	52+版本完全支持
Safari	10.1+	10.1+版本完全支持
Edge	16+	完全支持
IE	11+	支持部分功能

/* 兼容性写法 */
.container {
  display: -ms-grid; /* IE10+ */
  display: grid;
  
  /* IE10+兼容性 */
  -ms-grid-columns: 1fr 2fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
}

Grid基本概念

Grid容器和Grid项目

.container {
  display: grid;
  /* Grid容器样式 */
}

.item {
  /* Grid项目样式 */
}

Grid容器：设置了display: grid的元素
Grid项目：Grid容器的直接子元素

Grid线

Grid由横线和竖线构成，每个单元格都有一个编号：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3列 */
  grid-template-rows: 100px 100px 100px; /* 3行 */
}

Grid线编号（从1开始）：
列线: 1     2     3     4
      |-----|-----|-----|
行线: 1  [ item1 item2 item3 ]
      2  [ item4 item5 item6 ]
      3  [ item7 item8 item9 ]
      4

Grid轨道（Grid Tracks）

Grid轨道是相邻两条Grid线之间的空间：

列轨道：垂直的Grid轨道
行轨道：水平的Grid轨道

.container {
  /* 定义3个列轨道，宽度分别为100px、1fr、200px */
  grid-template-columns: 100px 1fr 200px;
  
  /* 定义3个行轨道，高度分别为auto、200px、auto */
  grid-template-rows: auto 200px auto;
}

Grid单元格

Grid单元格是Grid中最小的单位，由一个列轨道和一个行轨道交叉形成。

Grid区域

Grid区域是由一个或多个Grid单元格组成的矩形区域。

Grid属性详解

Grid容器属性

1. display

.container {
  display: grid;       /* 创建块级Grid */
  display: inline-grid; /* 创建行内Grid */
}

2. grid-template-columns / grid-template-rows

定义列和行的大小。

.container {
  /* 固定尺寸 */
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 100px 50px;
  
  /* 使用fr单位（自由空间比例） */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* 使用repeat()函数 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(4, 100px);
  
  /* 使用minmax()函数 */
  grid-template-columns: minmax(100px, 1fr);
  
  /* 使用auto-fill和auto-fit */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
  /* 使用gap */
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px; /* 列间距 */
  grid-row-gap: 10px;    /* 行间距 */
  gap: 20px 10px;       /* 简写形式 */
}

fr单位说明：

1fr表示占据所有可用空间的一部分
2fr是1fr的两倍
fr单位会根据可用空间自动分配

3. grid-template-areas

使用命名区域来布局。

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

4. grid-column / grid-row

指定Grid项目占据的Grid线。

.item {
  /* 从第1条线到第4条线 */
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  
  /* 使用span关键字 */
  grid-column: span 2; /* 占据2列 */
  grid-row: span 3;    /* 占据3行 */
  
  /* 使用命名区域 */
  grid-column: header-start / header-end;
  grid-row: sidebar-start / sidebar-end;
}

5. justify-items / align-items

控制Grid项目在单元格内的对齐方式。

.container {
  /* 水平对齐 */
  justify-items: start;  /* 左对齐 */
  justify-items: end;    /* 右对齐 */
  justify-items: center; /* 居中对齐 */
  justify-items: stretch; /* 拉伸（默认） */
  
  /* 垂直对齐 */
  align-items: start;   /* 顶部对齐 */
  align-items: end;     /* 底部对齐 */
  align-items: center;  /* 垂直居中 */
  align-items: stretch; /* 拉伸（默认） */
  
  /* 简写 */
  place-items: start end; /* justify-items: start; align-items: end; */
}

6. justify-content / align-content

控制整个Grid内容的对齐方式。

.container {
  /* 水平排列 */
  justify-content: start;    /* 从左开始 */
  justify-content: end;      /* 从右开始 */
  justify-content: center;   /* 居中 */
  justify-content: stretch;  /* 拉伸（默认） */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around;  /* 环绕对齐 */
  justify-content: space-evenly;  /* 均匀分布 */
  
  /* 垂直排列 */
  align-content: start;     /* 从上开始 */
  align-content: end;       /* 从下开始 */
  align-content: center;    /* 垂直居中 */
  align-content: stretch;   /* 拉伸（默认） */
  align-content: space-between; /* 上下两端对齐 */
  align-content: space-around;  /* 环绕对齐 */
  align-content: space-evenly;  /* 均匀分布 */
  
  /* 简写 */
  place-content: space-between center; /* justify-content: space-between; align-content: center; */
}

7. grid-auto-columns / grid-auto-rows

定义自动创建的轨道大小。

.container {
  /* 当项目超出指定轨道时自动创建 */
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
  
  /* 使用minmax */
  grid-auto-columns: minmax(100px, 1fr);
}

8. grid-auto-flow

控制自动布局算法的方向。

.container {
  grid-auto-flow: row;    /* 按行排列（默认） */
  grid-auto-flow: column;  /* 按列排列 */
  grid-auto-flow: dense;   /* 密集排列（填满空格） */
  grid-auto-flow: row dense; /* 按行排列并密集 */
}

Grid项目属性

1. grid-column-start / grid-column-end / grid-row-start / grid-row-end

指定Grid项目占据的Grid线。

.item {
  /* 指定Grid线 */
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  
  /* 使用span关键字 */
  grid-column-start: span 2;
  grid-row-end: span 3;
}

2. grid-column / grid-row

简写属性。

.item {
  /* 等同于 grid-column-start: 1; grid-column-end: 3; */
  grid-column: 1 / 3;
  
  /* 等同于 grid-column-start: 1; grid-column-end: span 2; */
  grid-column: 1 / span 2;
  
  /* 行方向 */
  grid-row: 2 / 4;
  grid-row: 2 / span 2;
}

3. grid-area

可以指定grid-row-start、grid-column-start、grid-row-end、grid-column-end。

.item {
  grid-area: 1 / 1 / 3 / 4;
  
  /* 或者使用命名区域 */
  .item {
    grid-area: header;
  }
}

4. justify-self / align-self

控制单个Grid项目在单元格内的对齐方式。

.item {
  justify-self: start;  /* 左对齐 */
  justify-self: end;    /* 右对齐 */
  justify-self: center; /* 居中对齐 */
  justify-self: stretch; /* 拉伸（默认） */
  
  align-self: start;   /* 顶部对齐 */
  align-self: end;     /* 底部对齐 */
  align-self: center;  /* 垂直居中 */
  align-self: stretch; /* 拉伸（默认） */
  
  /* 简写 */
  place-self: center end; /* justify-self: center; align-self: end; */
}

实战案例

案例1：响应式网页布局

<!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 {
            display: grid;
            grid-template-areas:
                "header header header"
                "sidebar main main"
                "footer footer footer";
            grid-template-columns: 250px 1fr 1fr;
            grid-template-rows: 80px 1fr 60px;
            gap: 20px;
            min-height: 100vh;
            padding: 20px;
        }

        .header {
            grid-area: header;
            background: #2c3e50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .sidebar {
            grid-area: sidebar;
            background: #3498db;
            color: white;
            padding: 20px;
        }

        .main {
            grid-area: main;
            background: #ecf0f1;
            padding: 20px;
        }

        .footer {
            grid-area: footer;
            background: #34495e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                grid-template-areas:
                    "header"
                    "main"
                    "sidebar"
                    "footer";
                grid-template-columns: 1fr;
                grid-template-rows: 80px 1fr 200px 60px;
            }
        }

        /* 美化样式 */
        .container > * {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .sidebar ul {
            list-style: none;
        }

        .sidebar li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .main h2 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .main p {
            line-height: 1.6;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">网站标题</header>
        <aside class="sidebar">
            <ul>
                <li>首页</li>
                <li>关于我们</li>
                <li>产品</li>
                <li>服务</li>
                <li>联系方式</li>
            </ul>
        </aside>
        <main class="main">
            <h2>主要内容</h2>
            <p>这里是网站的主要内容区域。在这个响应式布局中，当你调整浏览器窗口大小时，Grid布局会自动适应。</p>
            <p>在小屏幕上，侧边栏会移到主内容区域的下方，这样确保了良好的移动端体验。</p>
        </main>
        <footer class="footer">© 2024 网站版权</footer>
    </div>
</body>
</html>

案例2：图片画廊布局

<!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;
        }

        body {
            padding: 20px;
            background: #f5f5f5;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            grid-auto-flow: dense;
        }

        .gallery-item {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .gallery-item:hover {
            transform: translateY(-5px);
        }

        .gallery-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .gallery-item-content {
            padding: 15px;
        }

        .gallery-item h3 {
            color: #333;
            margin-bottom: 8px;
            font-size: 16px;
        }

        .gallery-item p {
            color: #666;
            font-size: 14px;
            line-height: 1.4;
        }

        /* 特殊尺寸的图片 */
        .gallery-item.large {
            grid-column: span 2;
        }

        .gallery-item.large img {
            height: 400px;
        }

        .gallery-item.tall {
            grid-row: span 2;
        }

        .gallery-item.tall img {
            height: 400px;
        }

        .gallery-item.wide {
            grid-column: span 2;
        }

        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .gallery-item.large,
            .gallery-item.wide {
                grid-column: span 1;
            }
        }
    </style>
</head>
<body>
    <div class="gallery">
        <div class="gallery-item">
            <img src="https://picsum.photos/seed/gallery1/300/200.jpg" alt="图片1">
            <div class="gallery-item-content">
                <h3>风景照片</h3>
                <p>这是一张美丽的风景照片，展现了大自然的魅力。</p>
            </div>
        </div>
        
        <div class="gallery-item large">
            <img src="https://picsum.photos/seed/gallery2/600/400.jpg" alt="大图">
            <div class="gallery-item-content">
                <h3>大尺寸图片</h3>
                <p>这张图片占据了较大的空间，适合展示重要内容。</p>
            </div>
        </div>
        
        <div class="gallery-item tall">
            <img src="https://picsum.photos/seed/gallery3/300/400.jpg" alt="高图">
            <div class="gallery-item-content">
                <h3>垂直照片</h3>
                <p>垂直构图的照片，适合展示高度较高的对象。</p>
            </div>
        </div>
        
        <div class="gallery-item">
            <img src="https://picsum.photos/seed/gallery4/300/200.jpg" alt="图片4">
            <div class="gallery-item-content">
                <h3>街拍摄影</h3>
                <p>捕捉城市生活中的精彩瞬间。</p>
            </div>
        </div>
        
        <div class="gallery-item wide">
            <img src="https://picsum.photos/seed/gallery5/600/300.jpg" alt="宽图">
            <div class="gallery-item-content">
                <h3>风景全景</h3>
                <p>广阔的风景全景图，展现壮丽的自然景观。</p>
            </div>
        </div>
        
        <div class="gallery-item">
            <img src="https://picsum.photos/seed/gallery6/300/200.jpg" alt="图片6">
            <div class="gallery-item-content">
                <h3>建筑摄影</h3>
                <p>现代建筑的设计美学和结构特点。</p>
            </div>
        </div>
        
        <div class="gallery-item">
            <img src="https://picsum.photos/seed/gallery7/300/200.jpg" alt="图片7">
            <div class="gallery-item-content">
                <h3>人文摄影</h3>
                <p>记录人们的生活状态和情感表达。</p>
            </div>
        </div>
        
        <div class="gallery-item">
            <img src="https://picsum.photos/seed/gallery8/300/200.jpg" alt="图片8">
            <div class="gallery-item-content">
                <h3>自然摄影</h3>
                <p>大自然的奇妙和美丽瞬间。</p>
            </div>
        </div>
    </div>
</body>
</html>

案例3：产品卡片的网格布局

<!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;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            padding: 20px;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .product-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background: #f0f0f0;
        }

        .product-info {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .product-category {
            font-size: 12px;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .product-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .product-description {
            font-size: 14px;
            color: #6c757d;
            line-height: 1.5;
            flex-grow: 1;
        }

        .product-footer {
            padding: 0 20px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .product-price {
            font-size: 20px;
            font-weight: 700;
            color: #e74c3c;
        }

        .product-rating {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .star {
            color: #ffc107;
            font-size: 14px;
        }

        .add-to-cart {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .add-to-cart:hover {
            background: #2980b9;
        }

        /* 特殊产品卡片样式 */
        .featured-product {
            grid-column: span 2;
        }

        .featured-product .product-image {
            height: 300px;
        }

        .featured-product .product-title {
            font-size: 22px;
        }

        .featured-product .product-price {
            font-size: 24px;
        }

        /* 新品标记 */
        .new-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #27ae60;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }

        .product-image-container {
            position: relative;
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .products-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .featured-product {
                grid-column: span 1;
            }
        }

        @media (max-width: 768px) {
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .products-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="products-grid">
        <!-- 特色产品 -->
        <div class="product-card featured-product">
            <div class="product-image-container">
                <div class="new-badge">新品</div>
                <img src="https://picsum.photos/seed/product1/400/300.jpg" alt="产品1" class="product-image">
            </div>
            <div class="product-info">
                <div class="product-category">电子产品</div>
                <h3 class="product-title">智能手表 Pro Max</h3>
                <p class="product-description">全新一代智能手表，拥有卓越的健康监测功能和长达7天的续航时间。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥2,999</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #6c757d; font-size: 12px;">(128)</span>
                </div>
            </div>
        </div>

        <!-- 普通产品 -->
        <div class="product-card">
            <img src="https://picsum.photos/seed/product2/300/200.jpg" alt="产品2" class="product-image">
            <div class="product-info">
                <div class="product-category">服装</div>
                <h3 class="product-title">时尚运动鞋</h3>
                <p class="product-description">舒适透气的运动鞋，适合各种运动场景。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥599</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #ddd;">☆</span>
                    <span style="color: #6c757d; font-size: 12px;">(89)</span>
                </div>
            </div>
            <button class="add-to-cart">加入购物车</button>
        </div>

        <div class="product-card">
            <img src="https://picsum.photos/seed/product3/300/200.jpg" alt="产品3" class="product-image">
            <div class="product-info">
                <div class="product-category">家居用品</div>
                <h3 class="product-title">智能台灯</h3>
                <p class="product-description">护眼LED台灯，支持APP控制和语音助手。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥399</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #6c757d; font-size: 12px;">(256)</span>
                </div>
            </div>
            <button class="add-to-cart">加入购物车</button>
        </div>

        <div class="product-card">
            <img src="https://picsum.photos/seed/product4/300/200.jpg" alt="产品4" class="product-image">
            <div class="product-info">
                <div class="product-category">食品</div>
                <h3 class="product-title">有机绿茶</h3>
                <p class="product-description">精选有机绿茶，清香怡人，健康养生。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥199</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #ddd;">☆</span>
                    <span style="color: #6c757d; font-size: 12px;">(67)</span>
                </div>
            </div>
            <button class="add-to-cart">加入购物车</button>
        </div>

        <div class="product-card">
            <img src="https://picsum.photos/seed/product5/300/200.jpg" alt="产品5" class="product-image">
            <div class="product-info">
                <div class="product-category">美妆护肤</div>
                <h3 class="product-title">面膜套装</h3>
                <p class="product-description">多种功效面膜，满足不同肌肤需求。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥299</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #6c757d; font-size: 12px;">(198)</span>
                </div>
            </div>
            <button class="add-to-cart">加入购物车</button>
        </div>

        <div class="product-card">
            <img src="https://picsum.photos/seed/product6/300/200.jpg" alt="产品6" class="product-image">
            <div class="product-info">
                <div class="product-category">图书</div>
                <h3 class="product-title">前端开发指南</h3>
                <p class="product-description">全面的前端开发教程，涵盖HTML、CSS、JavaScript等核心技术。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥89</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #6c757d; font-size: 12px;">(324)</span>
                </div>
            </div>
            <button class="add-to-cart">加入购物车</button>
        </div>

        <div class="product-card">
            <img src="https://picsum.photos/seed/product7/300/200.jpg" alt="产品7" class="product-image">
            <div class="product-info">
                <div class="product-category">运动健身</div>
                <h3 class="product-title">瑜伽垫</h3>
                <p class="product-description">环保材质，防滑设计，适合各种瑜伽动作。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥159</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #ddd;">☆</span>
                    <span style="color: #6c757d; font-size: 12px;">(45)</span>
                </div>
            </div>
            <button class="add-to-cart">加入购物车</button>
        </div>

        <div class="product-card">
            <img src="https://picsum.photos/seed/product8/300/200.jpg" alt="产品8" class="product-image">
            <div class="product-info">
                <div class="product-category">数码配件</div>
                <h3 class="product-title">无线充电器</h3>
                <p class="product-description">快速无线充电，支持多种设备。</p>
            </div>
            <div class="product-footer">
                <div class="product-price">¥129</div>
                <div class="product-rating">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span style="color: #6c757d; font-size: 12px;">(167)</span>
                </div>
            </div>
            <button class="add-to-cart">加入购物车</button>
        </div>
    </div>
</body>
</html>

响应式设计

使用Grid实现响应式布局

Grid布局非常适合响应式设计，因为它可以轻松适应不同屏幕尺寸。

/* 基础布局 */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 平板设备 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 手机设备 */
@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

使用auto-fit和auto-fill

/* auto-fill：尽可能多的列，但不拉伸 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

/* auto-fit：尽可能少的列，会拉伸 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

minmax()函数

minmax()函数确保元素在最小和最大尺寸之间。

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

性能优化

1. 避免过度嵌套

/* 不好的做法 - 多层嵌套 */
.container {
  display: grid;
}

.container .section {
  display: grid;
}

.container .section .card {
  display: grid;
}

/* 好的做法 - 简化结构 */
.container,
.section,
.card {
  display: grid;
}

2. 使用合理的Grid尺寸

/* 使用fr单位而不是固定像素 */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 更好的响应性 */
  /* 而不是 */
  /* grid-template-columns: 200px 400px 200px; */
}

3. 缓存Grid布局

浏览器会自动Grid布局，但可以通过以下方式优化：

.container {
  /* 使用will-change提示浏览器优化 */
  will-change: grid-template-columns, grid-template-rows;
}

与Flexbox对比

何时使用Grid？

/* Grid适合复杂的二维布局 */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

/* 特定元素定位 */
.featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

何时使用Flexbox？

/* Flexbox适合一维布局 */
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 复杂组件内部 */
.card {
  display: flex;
  flex-direction: column;
}

组合使用

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  flex-direction: column;
}

常见问题解决

1. Grid项目超出容器

/* 问题：项目超出容器边界 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 20px; /* 这会导致总宽度超出 */
}

/* 解决：使用auto-fit */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
}

2. Grid项目被拉伸

/* 问题：项目被拉伸占满整个单元格 */
.item {
  grid-column: 1 / 3;
}

/* 解决：设置对齐方式 */
.item {
  grid-column: 1 / 3;
  justify-self: start; /* 水平左对齐 */
  align-self: start;   /* 垂直顶部对齐 */
}

3. Grid线编号混乱

/* 问题：Grid线编号记不住 */
.container {
  grid-template-columns: 1fr 1fr 1fr; /* 列线：1 2 3 4 */
  grid-template-rows: 100px 100px;    /* 行线：1 2 3 */
}

.item {
  /* 从第1条列线到第4条列线（跨3列） */
  grid-column: 1 / 4;
  
  /* 从第1条行线到第3条行线（跨2行） */
  grid-row: 1 / 3;
}

4. 命名区域不工作

/* 问题：grid-template-areas不生效 */
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: 200px 1fr;
}

/* 解决：确保项目正确引用区域 */
.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

5. Grid布局不响应

/* 问题：Grid布局在移动端表现不佳 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* 解决：添加响应式断点 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

总结

CSS Grid布局是现代网页布局的强大工具，它让我们能够：

精确控制：在二维平面上精确控制元素位置
响应式设计：轻松实现复杂的响应式布局
减少代码：用更少的代码实现复杂的布局
提高性能：浏览器原生支持，性能优异

学习建议

从小开始：先学习基本的Grid属性
实践为主：通过实际项目练习
组合使用：Grid与Flexbox配合使用
关注兼容性：了解目标浏览器的支持情况

Grid布局不仅是一个CSS属性，更是一种布局思维方式。掌握它，你将能够构建出更加灵活、强大的网页布局。

最后更新：2026年5月18日
分类：IT | 知识学习