CSS初级项目如何制作多列博客布局_Grid网格布局实践-css教程-PHP中文网

CSS初级项目如何制作多列博客布局_Grid网格布局实践

P粉602998670

发布： 2025-11-26 16:41:02

原创

716人浏览过

使用CSS Grid可高效构建三列博客布局，通过grid-template-columns: 200px 1fr 200px定义两侧固定、中间自适应的结构，并用gap设置间距；结合媒体查询在屏幕宽度小于768px时切换为单列堆叠，利用order属性调整内容顺序以优化移动端阅读体验；通过fr单位与minmax()实现弹性响应式卡片布局，提升可读性与适配性。

css初级项目如何制作多列博客布局_grid网格布局实践

想要快速搭建一个美观、响应式的多列博客布局，CSS Grid 是最直接高效的选择。它让页面结构变得清晰，适配不同屏幕也更简单。下面通过一个实际的初级项目，带你一步步用 Grid 实现三列博客布局，并说明关键细节。

1. 布局结构设计

典型的多列博客包含：侧边栏（目录或简介）、主内容区（文章列表）、另一侧边栏（推荐或广告）。我们用三列来实现：

左侧窄栏：宽度 200px，放置导航或作者信息
中间主区域：占据剩余空间，显示文章卡片
右侧窄栏：宽度 200px，展示推荐内容

HTML 结构如下：

2. 使用 Grid 定义网格容器

给外层容器设置 display: grid，并用 grid-template-columns 划分三列：

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

.blog-layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
  padding: 20px;
  min-height: 100vh;
}

这里的关键是使用 1fr 单位，表示中间列自动填充剩余空间。gap 属性统一设置列间距，比 margin 更整洁。

3. 响应式调整：移动端改为单列

在小屏幕上，三列会拥挤。使用媒体查询切换为垂直堆叠：

小艺

华为公司推出的AI智能助手

549

查看详情

@media (max-width: 768px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .sidebar-left {
    order: 1;
  }
  .content {
    order: 2;
  }
  .sidebar-right {
    order: 3;
  }
}

通过 order 属性控制堆叠顺序，确保内容优先展示，提升移动端阅读体验。