使用 HTML 和 CSS 创建 3x3 网格布局并实现滚动效果-html教程-PHP中文网

使用 HTML 和 CSS 创建 3x3 网格布局并实现滚动效果

花韻仙語

发布： 2025-09-30 18:43:01

原创

926人浏览过

使用 html 和 css 创建 3x3 网格布局并实现滚动效果

本文将介绍如何使用 HTML 和 CSS 创建一个 3x3 的网格布局，并在屏幕上只显示前 9 个元素，超出部分通过水平滚动条展示。我们将利用 CSS Grid 布局的特性，结合一些计算技巧，来实现这种固定显示区域和滚动浏览的布局效果，尤其适用于需要在有限空间内展示大量内容，并保证关键信息优先呈现的场景。

核心思路

实现这个效果的关键在于以下几点：

CSS Grid 布局: 使用 display: grid 创建网格容器。
固定行列数: 使用 CSS 变量控制显示的行数和列数，从而实现 3x3 的固定网格。
自动列填充: 使用 grid-auto-flow: column dense 使网格元素按列排列，并自动填充。
水平滚动: 使用 overflow-x: auto 在内容超出容器宽度时显示水平滚动条。
动态宽度计算: 使用 calc() 函数动态计算每个网格项的宽度，以适应不同的屏幕尺寸。

实现步骤

1. HTML 结构

首先，创建包含所有网格项的 HTML 结构。

<div class="cards">
  <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 class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
  <div class="card">THIRTEEN</div>
  <div class="card">FOURTEEN</div>
</div>

登录后复制

2. CSS 样式

接下来，添加 CSS 样式来定义网格布局和滚动效果。

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

.cards {
  /* 定义列数 */
  --cols: 3;

  /* 定义行数 */
  --rows: 3;

  /* 定义网格间距 */
  --gap: 5px;

  /* 计算每个网格项的宽度 */
  --width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));

  display: grid;
  position: relative;
  grid-auto-flow: column dense; /* 按列排列，自动填充 */
  grid-template-rows: repeat(var(--rows), 1fr); /* 定义行高 */
  grid-auto-columns: var(--width); /* 定义列宽 */
  grid-gap: var(--gap); /* 设置网格间距 */
  overflow-x: auto; /* 启用水平滚动 */
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

登录后复制

代码解释:

--cols, --rows, --gap: 定义了列数、行数和网格间距，方便修改和维护。
--width: 使用 calc() 函数计算每个网格项的宽度，确保网格项在容器内均匀分布，并考虑到网格间距的影响。
grid-auto-flow: column dense: 设置网格的排列方式为按列排列，并使用 dense 算法，尽可能填充网格中的空隙。
grid-template-rows: repeat(var(--rows), 1fr): 定义了网格的行高，1fr 表示将剩余空间平均分配给每一行。
grid-auto-columns: var(--width): 定义了网格的列宽，使其等于我们计算出的 --width。
overflow-x: auto: 当内容超出容器宽度时，显示水平滚动条。

示例

将以上 HTML 和 CSS 代码组合在一起，就可以创建一个 3x3 的网格布局，并且当网格项数量超过 9 个时，可以通过水平滚动条查看剩余的网格项。

注意事项

浏览器兼容性: CSS Grid 布局在现代浏览器中得到了广泛支持，但在旧版本浏览器中可能存在兼容性问题。建议在使用时进行兼容性测试，并考虑使用 Polyfill 或备选方案。
响应式设计: 虽然我们使用了 calc() 函数动态计算网格项的宽度，但仍然需要考虑不同屏幕尺寸下的显示效果。可以使用媒体查询来调整 CSS 变量的值，以适应不同的屏幕。
性能优化: 当网格项数量非常大时，可能会影响页面性能。可以考虑使用虚拟滚动等技术来优化性能。