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

本文将介绍如何使用 HTML 和 CSS 创建一个固定大小的 3x3 网格布局，并在网格元素超出 9 个时，实现水平滚动效果。该方法利用 CSS Grid 布局和一些巧妙的计算，确保在不同屏幕尺寸下始终显示 9 个元素，并将剩余元素置于可滚动区域，从而优化用户体验。

实现固定 3x3 网格布局

要实现一个固定 3x3 的网格布局，并让超出部分的元素可以水平滚动，可以使用 CSS Grid 布局结合一些自定义属性来实现。以下是详细的步骤和代码示例：

1. HTML 结构

首先，创建一个包含所有网格项的容器（例如，一个 div 元素），并为每个网格项创建相应的元素。

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

<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 Grid 布局来定义网格的结构和样式。关键在于使用自定义属性来控制网格的列数、行数和间距，并使用 grid-auto-flow 和 overflow-x 属性来实现水平滚动。

火龙果写作

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

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：定义了网格的列数和行数，这里设置为 3x3。
• --gap：定义了网格项之间的间距。
• --width：计算每个网格项的宽度，确保它们在容器内均匀分布。
• grid-auto-flow: column dense：使网格项按列排列，并允许自动填充，这意味着如果一个网格项无法放入当前行，它将自动移动到下一行。
• grid-template-rows: repeat(var(--rows), 1fr)：定义了网格的行模板，1fr 表示每行的高度相等。
• grid-auto-columns: var(--width)：定义了网格的列宽度，使用之前计算的 --width 变量。
• overflow-x: auto：启用水平滚动，当网格项超出容器宽度时，将显示滚动条。

3. 注意事项

• 确保容器的宽度足够容纳至少 3 列网格项。
• 可以根据需要调整 --cols、--rows 和 --gap 变量来改变网格的布局。
• 为了更好的用户体验，可以添加一些 CSS 过渡效果，使滚动更加平滑。

4. 总结

通过使用 CSS Grid 布局和自定义属性，可以轻松地创建一个固定 3x3 的网格布局，并实现水平滚动效果。这种方法灵活且易于维护，可以应用于各种需要固定大小网格布局的场景。 这种方法可以保证在任何屏幕尺寸下，都只显示前 9 个元素，超出的元素可以通过水平滚动查看。

以上就是使用 HTML 和 CSS 创建固定 3x3 网格布局并实现滚动效果的详细内容，更多请关注php中文网其它相关文章！