如何用CSS Grid实现主区域背景图+侧边菜单+右侧头部及缩略图布局？

根据你提供的布局需求，我整理了一个简洁的CSS Grid实现方案，完全匹配左侧菜单、右侧头部+缩略图区域的结构，同时支持主区域背景图设置：

实现代码 #

HTML结构 #

<div class="page-container">
  <!-- 左侧菜单 -->
  <aside class="sidebar">
    <ul class="menu-list">
      <li>菜单选项1</li>
      <li>菜单选项2</li>
      <li>菜单选项3</li>
      <li>菜单选项4</li>
    </ul>
  </aside>

  <!-- 右侧主内容区 -->
  <main class="main-content">
    <!-- 头部区域 -->
    <header class="page-header">
      <h1>页面标题</h1>
    </header>

    <!-- 缩略图区域 -->
    <div class="thumbnail-grid">
      <div class="thumbnail-item">缩略图1</div>
      <div class="thumbnail-item">缩略图2</div>
      <div class="thumbnail-item">缩略图3</div>
      <div class="thumbnail-item">缩略图4</div>
    </div>
  </main>
</div>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器设置Grid布局 */
.page-container {
  display: grid;
  /* 左侧菜单固定宽度280px，右侧自适应占满剩余空间 */
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  /* 主区域背景图 */
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* 左侧菜单样式 */
.sidebar {
  background-color: rgba(255,255,255,0.9); /* 半透明白色背景，提升菜单可读性 */
  padding: 2rem;
}

.menu-list {
  list-style: none;
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
}

.menu-list li {
  padding: 0.8rem 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-list li:hover {
  background-color: #e0e0e0;
}

/* 右侧主内容区 */
.main-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 头部区域 */
.page-header {
  background-color: rgba(255,255,255,0.9);
  padding: 1.5rem;
  border-radius: 8px;
}

/* 缩略图网格 */
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.thumbnail-item {
  background-color: rgba(255,255,255,0.9);
  height: 150px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键实现说明 #

• Grid布局核心：page-container使用grid-template-columns: 280px 1fr，固定左侧菜单宽度，右侧自动填充剩余空间，完美实现左右分栏。
• 背景图处理：直接给容器添加background-image，配合background-size: cover和background-position: center保证背景图自适应显示；background-attachment: fixed可以实现滚动时背景图固定的效果（不需要可删除）。
• 可读性优化：菜单、头部和缩略图都添加了半透明白色背景，避免内容与背景图重叠导致的可读性问题。
• 响应式适配：缩略图区域使用repeat(auto-fill, minmax(200px, 1fr))，可以根据屏幕宽度自动调整列数；如果需要移动端适配，只需添加媒体查询将grid-template-columns改为1fr，让菜单堆叠在上方。

内容的提问来源于stack exchange，提问作者new_coder