使用 CSS Grid 实现垂直排列的侧边栏布局-html教程-PHP中文网

使用 CSS Grid 实现垂直排列的侧边栏布局

霞舞

发布： 2025-09-27 17:27:15

原创

449人浏览过

使用 css grid 实现垂直排列的侧边栏布局

本文将介绍如何使用 CSS Grid 布局实现垂直排列的侧边栏。通过修改 CSS Grid 的 grid-template-columns 属性，并将侧边栏元素放置在独立的 div 容器中，可以轻松实现所需的布局效果。本文提供了详细的代码示例和解释，帮助开发者理解并应用这种布局方法。

CSS Grid 是一种强大的布局系统，能够灵活地控制页面元素的排列方式。要实现垂直排列的侧边栏，核心在于正确配置 grid-template-columns 属性，以及合理地组织 HTML 结构。

实现步骤

定义 Grid 容器：

首先，将包含所有元素的容器设置为 Grid 容器。

```css
.container {
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
```

这里，`grid-template-columns: 1fr 2fr 1fr;` 定义了三列，分别占据可用空间的 1/4， 2/4， 1/4。这意味着左侧侧边栏和右侧侧边栏宽度相同，内容区域宽度是侧边栏的两倍。

登录后复制

创建侧边栏容器：

将侧边栏元素放置在独立的 div 容器中，这样可以更好地控制它们的排列。

立即学习“前端免费学习笔记（深入）”；

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

```html
<div class="sidebar">
  <div class="py-2 md-2">
    <h1 class="fw-bold text-gray fs-6">Sidebar Container 1</h1>
    <div class="tags d-flex flex-column">
      <a href="#">Hello World 1</a>
    </div>
  </div>
  <div class="py-2 mt-2">
    <h1 class="fw-bold text-gray fs-6">Sidebar Container 2</h1>
    <div class="tags d-flex flex-column">
      <a href="#">This should be just below Sidebar Container 1</a>
    </div>
  </div>
</div>
```

注意，这里使用了 Bootstrap 的类 `py-2` 和 `mt-2` 来增加内边距和外边距，以实现更好的视觉效果。

登录后复制

设置侧边栏样式：

为侧边栏容器及其子元素添加样式。

```css
.sidebar > div {
  margin-right: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  align-self: start;
  background: #fff;
  padding: 12px 8px;
}
```

`margin-right: 3px;` 为侧边栏元素添加右边距。`border`, `border-radius`, `background`, 和 `padding` 用于美化侧边栏的样式。`align-self: start;` 确保侧边栏元素在垂直方向上对齐到顶部。

登录后复制

内容区域和右侧侧边栏：

与侧边栏类似，内容区域和右侧侧边栏也需要放置在各自的 div 容器中，并设置相应的样式。

```html
<div class="content">
  <div class="featured-image">
    <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="Featured banner">
  </div>
</div>
<div class="right-bar">
  <div class="tags md-2 px-2 pt-1">
    <h1 class="fw-bold text-gray fs-6">Sidebar Container 3</h1>
    <a href="#">Hello World 2</a>
  </div>
  <div class="tags mt-2 px-2 pt-1">
    <h1 class="fw-bold text-gray fs-6">Sidebar Container 4</h1>
    <a href="#">This should be just below Sidebar Container 3</a>
  </div>
</div>
```

```css
.right-bar > div {
  margin-left: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  align-self: start;
}
```

`margin-left: 3px;` 为右侧侧边栏元素添加左边距。

登录后复制

完整代码示例

以下是完整的 HTML 和 CSS 代码示例：

<link href="https://cdn.jsdelivr.net/npm/<a class="__cf_email__" data-cfemail="75171a1a01060107140535405b475b45581710011444" href="/cdn-cgi/l/email-protection">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="sidebar">
    <div class="py-2 md-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 1</h1>
      <div class="tags d-flex flex-column">
        <a href="#">Hello World 1</a>
      </div>
    </div>
    <div class="py-2 mt-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 2</h1>
      <div class="tags d-flex flex-column">
        <a href="#">This should be just below Sidebar Container 1</a>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="featured-image">
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="Featured banner">
    </div>
  </div>
  <div class="right-bar">
    <div class="tags md-2 px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 3</h1>
      <a href="#">Hello World 2</a>
    </div>
    <div class="tags mt-2 px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 4</h1>
      <a href="#">This should be just below Sidebar Container 3</a>
    </div>
  </div>
</div>

登录后复制

.container {
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.text-gray {
  color: #c0c3c5;
}

.sidebar > div {
  margin-right: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  align-self: start;
  background: #fff;
  padding: 12px 8px;
}

.right-bar > div {
  margin-left: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  align-self: start;
}

.content img {
  width: 100%;
  height: 200px;
}

.tags a {
  font-size: 0.75rem;
  font-family: "Noto Sans", sans-serif;
  line-height: 1.7;
  font-weight: 400;
  text-transform: capitalize;
  color: #1a1a1b;
}

.tags a:hover {
  transition: 250ms ease;
  color: #00639e;
}

.sub-title {
  font-family: "Noto Serif", serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.3px;
}

登录后复制

注意事项

确保 Grid 容器的子元素按照正确的顺序排列，以实现所需的布局效果。
可以使用 CSS Grid 的 grid-row 和 grid-column 属性来更精确地控制元素的位置。
根据实际需求调整 grid-template-columns 的值，以适应不同的屏幕尺寸和内容。
考虑使用媒体查询来实现响应式布局，以在不同的设备上获得最佳的用户体验。

总结

通过使用 CSS Grid 布局，可以轻松实现垂直排列的侧边栏。关键在于正确配置 grid-template-columns 属性，并将侧边栏元素放置在独立的 div 容器中。希望本文能够帮助你理解并应用这种布局方法。

以上就是使用 CSS Grid 实现垂直排列的侧边栏布局的详细内容，更多请关注php中文网其它相关文章！