如何实现小屏幕下CSS Grid非首个子项横向滚动？

要实现小屏幕下除第一个子项外其余横向滚动的效果，核心是把需要滚动的子项单独包裹在一个容器中，结合Grid布局和横向滚动逻辑来实现。以下是具体实现步骤和代码：

1. 调整HTML结构 #

将原本的后4个帖子子项放入专用的滚动容器内，让第一个子项独立在外：

<div class="post-grid">
  <!-- 第一个子项：单独展示 -->
  <div class="post-item featured-post">
    <!-- 帖子内容 -->
  </div>
  <!-- 滚动容器：包裹其余4个子项 -->
  <div class="scroll-container">
    <div class="post-item">帖子2</div>
    <div class="post-item">帖子3</div>
    <div class="post-item">帖子4</div>
    <div class="post-item">帖子5</div>
  </div>
</div>

2. 编写CSS逻辑 #

基础Grid布局（大屏幕） #

保持原有的多列Grid布局，让所有项正常排列：

.post-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 大屏幕下5列均分 */
  gap: 1.5rem;
  padding: 1rem;
}

.post-item {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
}

小屏幕适配（媒体查询） #

在小屏幕下修改Grid为单列布局，同时让滚动容器开启横向滚动：

@media (max-width: 768px) {
  .post-grid {
    grid-template-columns: 1fr; /* 切换为单列布局 */
  }

  .scroll-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto; /* 开启横向滚动 */
    padding-bottom: 1rem; /* 给滚动条预留空间 */
    /* 可选：优化滚动条样式 */
    scrollbar-width: thin;
  }

  .scroll-container .post-item {
    flex-shrink: 0; /* 禁止子项被压缩变形 */
    width: 280px; /* 固定子项宽度，可按需调整 */
  }

  /* 可选：自定义滚动条样式 */
  .scroll-container::-webkit-scrollbar {
    height: 6px;
  }
  .scroll-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
  }
}

关键要点说明 #

• 滚动容器包裹子项：这是实现横向滚动的核心前提，只有同容器内的元素才能统一触发横向滚动行为。
• flex-shrink: 0：确保滚动容器内的子项不会被压缩变形，保持预设宽度。
• overflow-x: auto：仅在内容超出容器宽度时显示滚动条，避免无意义的滚动条占位。

内容的提问来源于stack exchange，提问作者Md. Ibrahim