CSS Grid布局实例

CSS Grid 是一种用于网页布局的强大工具，它允许开发者创建灵活、响应式的网格系统，而无需依赖浮动或定位。Grid 布局通过定义行和列来组织元素，使得网页设计变得更加直观且易于管理。下面将通过一系列实例来展示如何使用 CSS Grid 实现不同的布局效果。

实例一：基本网格布局

目标描述

创建一个简单的两列布局，左侧固定宽度，右侧自适应填充剩余空间。

HTML 结构

<div class="grid-container">
    <div class="column-left">左侧内容</div>
    <div class="column-right">右侧内容</div>
</div>

CSS 样式

.grid-container {
    display: grid;
    grid-template-columns: 200px auto;
    gap: 10px;
}

.column-left {
    background-color: #f0f0f0;
}

.column-right {
    background-color: #e0e0e0;
}

实现效果

此布局中，左侧内容宽度固定为 200px，右侧内容则占据剩余空间。通过 grid-template-columns 属性定义了网格的列布局，auto 表示自适应宽度，gap 设置了列之间的间距。

实例二：响应式网格布局

目标描述

创建一个响应式布局，根据不同屏幕尺寸调整列数和布局样式。

HTML 结构

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

CSS 样式

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

.item {
    background-color: #ddd;
    padding: 20px;
}

实现效果

在不同屏幕尺寸下，布局会自动调整列数以适应屏幕宽度，确保每个项目都有足够的空间展示。repeat(auto-fill, minmax(200px, 1fr)) 表示根据可用空间自动填充列数，最小宽度为 200px，剩余空间平均分配给每一列。

实例三：多级网格布局

目标描述

实现一个包含多个子网格的多级布局，用于展示产品分类和产品列表。

HTML 结构

<div class="grid-container">
    <div class="category-grid">
        <div class="category-item">Category A</div>
        <div class="category-item">Category B</div>
    </div>
    <div class="product-grid">
        <div class="product-item">Product 1</div>
        <div class="product-item">Product 2</div>
        <div class="product-item">Product 3</div>
    </div>
</div>

CSS 样式

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
}

.category-grid {
    grid-column: 1 / span 2;
}

.product-grid {
    grid-row: 1 / span 2;
}

.category-item,
.product-item {
    background-color: #ccc;
    padding: 20px;
}

实现效果

此布局展示了多级网格的概念，上层是类别网格，下层是产品网格。通过 grid-template-columns 和 grid-template-rows 控制网格的大小，grid-column 和 grid-row 控制网格的跨列和跨行，实现了层次分明的布局。

总结

CSS Grid 提供了一种强大的方式来构建复杂的网页布局，通过灵活的行和列定义，以及响应式特性，使得网页设计更加高效和美观。以上实例展示了从基础到进阶的布局应用，开发者可以根据具体需求选择合适的网格配置，实现多样化和个性化的网页设计。