本文将介绍如何使用 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 样式来定义网格布局和滚动效果。
立即学习“前端免费学习笔记（深入）”；
.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 变量的值，以适应不同的屏幕。
- 性能优化: 当网格项数量非常大时，可能会影响页面性能。可以考虑使用虚拟滚动等技术来优化性能。
总结
通过本文的介绍，你学会了如何使用 HTML 和 CSS 创建一个 3x3 的网格布局，并实现水平滚动效果。这种布局方式可以有效地在有限的空间内展示大量内容，并保证关键信息优先呈现。希望本文对你有所帮助。
