本文将介绍如何使用 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 容器中，这样可以更好地控制它们的排列。
立即学习“前端免费学习笔记（深入）”；
```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 容器中。希望本文能够帮助你理解并应用这种布局方法。
