HTML5 CSS Grid 布局详解

最新推荐文章于 2025-03-20 20:30:14 发布

请叫我飞哥@

最新推荐文章于 2025-03-20 20:30:14 发布

阅读量390

点赞数 5

分类专栏： HTML5 文章标签： html5 css 前端

本文链接：https://blog.youkuaiyun.com/qq_24459277/article/details/145060589

版权

HTML5 专栏收录该内容

45 篇文章

订阅专栏

HTML5 CSS Grid 布局详解

CSS Grid 布局是一种强大的布局系统，允许开发者使用网格（grid）来创建复杂的网页布局。通过定义行和列，CSS Grid 可以轻松地组织和排列元素，使得响应式设计变得更加简单和灵活。

1. 基本概念

网格容器（Grid Container）：使用 display: grid; 声明的元素。
网格项（Grid Item）：网格容器中的直接子元素。
行（Row）和列（Column）：定义网格的结构。

2. 创建 HTML 结构

下面是一个基本的HTML结构，适用于CSS Grid布局。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 布局示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="item1">头部</div>
        <div class="item2">侧边栏</div>
        <div class="item3">内容区</div>
        <div class="item4">底部</div>
    </div>
</body>
</html>

3. CSS 样式

在 styles.css 文件中，我们可以定义CSS Grid的样式。

body {
    font-family: Arial, sans-serif;
    margin: 0;
}

.grid-container {
    display: grid; /* 声明为网格容器 */
    grid-template-columns: 1fr 3fr; /* 定义两列：第一列占1份，第二列占3份 */
    grid-template-rows: auto 1fr auto; /* 定义三行：第一行自适应，第二行占满剩余空间，第三行自适应 */
    gap: 10px; /* 行和列之间的间距 */
    height: 100vh; /* 设置容器高度为视口高度 */
}

.grid-container > div {
    background-color: #3498db; /* 背景颜色 */
    color: white;
    padding: 20px;
    text-align: center;
}

/* 定义每个网格项的样式 */
.item1 {
    grid-column: 1 / span 2; /* 头部跨越两列 */
}

.item2 {
    grid-row: 2 / span 1; /* 侧边栏在第二行 */
}

.item3 {
    grid-row: 2 / span 1; /* 内容区在第二行 */
}

.item4 {
    grid-column: 1 / span 2; /* 底部跨越两列 */
}

4. 代码说明

网格容器：通过 display: grid; 创建网格容器。
列和行的定义：
- grid-template-columns: 1fr 3fr; 定义了两列，其中第二列的宽度是第一列的三倍。
- grid-template-rows: auto 1fr auto; 定义了三行，第一行和第三行自适应高度，中间行占满剩余空间。
间距：使用 gap 属性设置行和列之间的间距。
网格项的样式：
- 使用 grid-column 和 grid-row 属性定义网格项的起始位置和跨越的列或行。

5. 效果展示

通过上述代码，网页将呈现一个包含头部、侧边栏、内容区和底部的布局。头部和底部跨越整个宽度，侧边栏和内容区并排显示。

6. 扩展

响应式设计：可以使用媒体查询调整网格的列和行，以适应不同屏幕尺寸。
高级布局：结合 CSS Grid 的其他功能，如命名网格区域，进一步简化布局管理。

7. 示例：响应式 CSS Grid 布局

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /* 在小屏幕上变为单列布局 */
    }
    .item1, .item4 {
        grid-column: 1; /* 头部和底部在第一列 */
    }
}