本文将介绍如何使用 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 属性来实现水平滚动。
.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 个元素，超出的元素可以通过水平滚动查看。
