如何使用CSS Grid实现两列布局？

最新推荐文章于 2025-04-01 22:51:48 发布

祈澈菇凉

最新推荐文章于 2025-04-01 22:51:48 发布

阅读量1.4k

点赞数 25

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36538012/article/details/145590916

版权

使用 CSS Grid 实现两列布局

CSS Grid Layout 是一种强大的二维布局系统，使得在网页中创建复杂的布局变得简单和高效。通过 CSS Grid，可以轻松实现两列布局，无论是响应式设计、固定宽度还是流式布局。本文将详细介绍如何使用 CSS Grid 实现两列布局，包括基本概念、具体实现步骤、实例代码和最佳实践。

1. CSS Grid 基础概念

1.1 Grid 容器与 Grid 项目

在 CSS Grid 中，容器是设置为 display: grid 的元素，而其直接子元素则是 Grid 项目。Grid 容器负责定义布局的行和列，而 Grid 项目则是在这些行和列中放置的内容。

1.2 主要属性

display: 将容器设置为 Grid 容器。
grid-template-columns: 定义列的数量及宽度。
grid-template-rows: 定义行的数量及高度。
grid-gap: 定义行和列之间的间距。
grid-area: 定义项目在 Grid 中的位置。

2. 实现两列布局的基本步骤

2.1 创建 Grid 容器

首先，定义一个 Grid 容器并启用 Grid 布局：

<div class="grid-container">
    <div class="grid-item">左侧内容</div>
    <div class="grid-item">右侧内容</div>
</div>

.grid-container {
   
    display: grid; /* 设置为 Grid 容器 */
}

2.2 定义列

使用 grid-template-columns 属性来定义两列的布局：

.grid-container {
   
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
}

这里，1fr 表示一份可用空间。使用 1fr 1fr 表示两列等宽。

2.3 添加间距

可以使用 grid-gap（或 gap）来定义行和列之间的间距：

.grid-container {
   
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* 行和列之间的间距 */
}

3. 完整示例

下面是一个完整的示例，展示如何使用 CSS Grid 实现两列布局。

3.1 HTML 结构

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

最低0.47元/天解锁文章