html详细的网格样式-阿里云开发者社区

html详细的网格样式

2025-08-31 16

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS网格布局（Grid Layout）是CSS中强大的二维布局系统，能够灵活控制行与列，适用于构建复杂网页结构。它支持响应式设计、对齐控制、区域命名等功能，代码更简洁直观，极大提升了布局效率与可维护性。

网格布局（Grid Layout）是 CSS 中强大的布局系统，特别适合构建复杂的二维布局。以下是网格布局的主要优点：

1. 二维布局能力

同时控制行和列的布局
可以精确控制元素在水平和垂直方向上的位置
比浮动和定位布局更直观易懂

.area-grid {
   
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: 80px 1fr 60px;
}

2. 灵活的轨道系统

支持多种单位：px、fr、%、auto 等
可以使用 repeat() 函数简化重复定义
fr 单位能够按比例分配剩余空间

.fr-grid {
   
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 按比例分配 */
}

.repeat-grid {
   
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 重复4列 */
}

3. 响应式设计友好

auto-fit 和 minmax() 实现自适应布局
能够根据屏幕尺寸自动调整列数和大小
无需媒体查询即可实现响应式效果

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

4. 强大的对齐控制

提供 justify-items、align-items 等属性控制对齐
可以单独控制某个网格项的对齐方式
支持内容分布和对齐的精细控制

5. 网格线和区域命名

可以为网格线和区域命名，提高代码可读性
便于团队协作和维护
使复杂布局更易于理解和修改

.named-grid {
   
    display: grid;
    grid-template-columns: [start] 1fr [middle] 1fr [end];
    grid-template-rows: [top] 100px [center] 100px [bottom];
}

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

6. 子元素定位灵活

可以精确控制子元素跨越的行数和列数
支持重叠布局
子元素可以脱离正常文档流进行定位

.item1 {
   
    grid-column: 1 / 3; /* 占据第1到第3列 */
    grid-row: 1 / 2;    /* 占据第1行 */
}

7. 与 Flexbox 互补

Grid 适合整体页面布局
Flexbox 适合一维布局（行或列）
两者结合使用可以构建更复杂的界面

8. 浏览器支持良好

现代浏览器都支持 CSS Grid
有良好的回退方案支持旧浏览器
性能优化良好

9. 简化代码

减少了对额外包装元素的需求
无需清除浮动等传统布局技巧
代码更简洁、可读性更强

总的来说，CSS Grid 提供了一种更直观、更强大的布局方式，特别适合构建复杂的网页布局，是现代 Web 开发中不可或缺的工具。
具体内容实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局详解</title>
    <style>
        /* 基础样式 */
        .container {
            margin: 20px 0;
            padding: 15px;
            border: 2px solid #333;
        }

        .box {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
            font-weight: bold;
        }

        /* 1. 基本网格布局 */
        .basic-grid {
            display: grid;                    /* 启用网格布局 */
            grid-template-columns: 200px 200px 200px; /* 定义3列，每列200px */
            grid-template-rows: 100px 100px;  /* 定义2行，每行100px */
            gap: 10px;                        /* 网格间隙 */
        }

        /* 2. 使用fr单位的网格 */
        .fr-grid {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr; /* fr单位：按比例分配剩余空间 */
            grid-template-rows: 100px 100px;
            gap: 10px;
        }

        /* 3. 重复网格 */
        .repeat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 重复4次，每列占1份空间 */
            grid-template-rows: repeat(2, 100px);  /* 重复2次，每行100px */
            gap: 10px;
        }

        /* 4. 自动网格 */
        .auto-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自适应列数 */
            gap: 10px;
        }

        /* 5. 网格线命名 */
        .named-grid {
            display: grid;
            grid-template-columns: [start] 1fr [middle] 1fr [end]; /* 命名网格线 */
            grid-template-rows: [top] 100px [center] 100px [bottom];
            gap: 10px;
        }

        /* 6. 网格区域命名 */
        .area-grid {
            display: grid;
            grid-template-areas: 
                "header header header"
                "sidebar main main"
                "footer footer footer";
            grid-template-columns: 150px 1fr 1fr;
            grid-template-rows: 80px 1fr 60px;
            gap: 10px;
            height: 300px;
        }

        .header { 
            grid-area: header; 
            background-color: #e74c3c;
        }

        .sidebar { 
            grid-area: sidebar; 
            background-color: #2ecc71;
        }

        .main { 
            grid-area: main; 
            background-color: #f39c12;
        }

        .footer { 
            grid-area: footer; 
            background-color: #9b59b6;
        }

        /* 7. 子元素定位 */
        .positioned-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
        }

        .item1 {
            grid-column: 1 / 3;    /* 占据第1到第3列 */
            grid-row: 1 / 2;       /* 占据第1行 */
            background-color: #e74c3c;
        }

        .item2 {
            grid-column: 3 / 5;    /* 占据第3到第5列 */
            grid-row: 1 / 3;       /* 占据第1到第3行 */
            background-color: #2ecc71;
        }

        .item3 {
            grid-column: 1 / 2;    /* 占据第1列 */
            grid-row: 2 / 4;       /* 占据第2到第4行 */
            background-color: #f39c12;
        }

        .item4 {
            grid-column: 2 / 4;    /* 占据第2到第4列 */
            grid-row: 3 / 4;       /* 占据第3行 */
            background-color: #9b59b6;
        }
    </style>
</head>
<body>
    <h1>网格布局(Grid Layout)详解</h1>

    <!-- 1. 基本网格布局 -->
    <div class="container">
        <h2>1. 基本网格布局</h2>
        <div class="basic-grid">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
        <p>使用 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 定义网格结构</p>
    </div>

    <!-- 2. 使用fr单位 -->
    <div class="container">
        <h2>2. 使用fr单位</h2>
        <div class="fr-grid">
            <div class="box">1fr</div>
            <div class="box">2fr</div>
            <div class="box">1fr</div>
            <div class="box">1fr</div>
            <div class="box">2fr</div>
            <div class="box">1fr</div>
        </div>
        <p><code>fr</code> 单位表示可用空间的分数</p>
    </div>

    <!-- 3. 重复网格 -->
    <div class="container">
        <h2>3. 重复网格</h2>
        <div class="repeat-grid">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
        </div>
        <p>使用 <code>repeat()</code> 函数简化重复的网格定义</p>
    </div>

    <!-- 4. 自动网格 -->
    <div class="container">
        <h2>4. 自动网格</h2>
        <div class="auto-grid">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
        <p><code>auto-fit</code> 和 <code>minmax()</code> 实现响应式网格</p>
    </div>

    <!-- 5. 网格区域命名 -->
    <div class="container">
        <h2>5. 网格区域命名</h2>
        <div class="area-grid">
            <div class="box header">Header</div>
            <div class="box sidebar">Sidebar</div>
            <div class="box main">Main Content</div>
            <div class="box footer">Footer</div>
        </div>
        <p>使用 <code>grid-template-areas</code> 创建复杂的布局结构</p>
    </div>

    <!-- 6. 子元素定位 -->
    <div class="container">
        <h2>6. 子元素定位</h2>
        <div class="positioned-grid">
            <div class="box item1">1 (跨度: 2列, 1行)</div>
            <div class="box item2">2 (跨度: 2列, 2行)</div>
            <div class="box item3">3 (跨度: 1列, 2行)</div>
            <div class="box item4">4 (跨度: 2列, 1行)</div>
        </div>
        <p>使用 <code>grid-column</code> 和 <code>grid-row</code> 精确控制子元素位置</p>
    </div>
    </body>
</html>