如何使用HTML与CSS实现固定3×3网格 剩余元素右侧滚动展示

实现思路 #

把原有单网格容器拆为左右两个独立区块：

• 左侧为固定规格网格区，永远只展示前9个元素，不受屏幕尺寸变化影响
• 右侧为独立滚动区，放置第10个及之后的所有元素，内容溢出时展示纵向滚动条

原有代码里的auto-fill+minmax列规则会随容器宽度自动调整列数，没法保证永远3列，需要替换成固定行列的网格配置。

完整代码 #

CSS样式 #

/* 外层全局容器，控制左右区块并排 */
.page-wrap {
  display: flex;
  gap: 10px;
  height: 100vh;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
}

/* 左侧3×3固定网格 */
.fixed-grid {
  flex: 1;
  display: grid;
  /* 强制固定3列等宽 */
  grid-template-columns: repeat(3, 1fr);
  /* 强制固定3行等高 */
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
  /* 超出9个的内容直接隐藏，保证网格布局不被撑坏 */
  overflow: hidden;
}

/* 右侧可滚动列表区 */
.scroll-panel {
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 内容超出时触发纵向滚动 */
  overflow-y: auto;
}

/* 通用卡片样式 */
.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

HTML结构 #

<div class="page-wrap">
  <!-- 左侧网格区：仅放前9个元素 -->
  <div class="fixed-grid">
    <div class="card">ONE</div>
    <div class="card">TWO</div>
    <div class="card">THREE</div>
    <div class="card">FOUR</div>
    <div class="card">FIVE</div>
    <div class="card">SIX</div>
    <div class="card">SEVEN</div>
    <div class="card">EIGHT</div>
    <div class="card">NINE</div>
  </div>
  <!-- 右侧滚动区：放剩余所有元素 -->
  <div class="scroll-panel">
    <div class="card">TEN</div>
    <div class="card">ELEVEN</div>
    <div class="card">TWELVE</div>
    <!-- 剩余元素按顺序追加在此处即可，总计20个元素时这里放11个 -->
  </div>
</div>

效果说明 #

• 左侧网格始终保持3行×3列的布局，窗口尺寸变化时只会调整网格整体大小，不会改变行列数，永远只展示9个元素
• 右侧滚动区宽度固定，卡片纵向排列，元素过多时自动出现滚动条，不会挤占左侧网格空间
• 这种手动拆分DOM的写法兼容性最好，不需要复杂的CSS选择器控制元素位置，后续维护调整也更方便。

内容的提问来源于stack exchange，提问作者Apurba HR Mondal