使用 CSS Grid 创建固定 3x3 网格并实现滚动效果

本文将介绍如何使用 CSS Grid 布局创建一个固定显示的 3x3 网格，同时将超出网格范围的元素放置在右侧，并提供横向滚动条以便访问这些元素。这种布局方式适用于需要在有限空间内展示核心内容，同时提供更多内容供用户浏览的场景。

实现原理

核心思路是利用 CSS Grid 的 grid-auto-flow: column dense; 属性，结合自定义 CSS 变量控制网格的列数、行数和间距，并通过 overflow-x: auto; 属性实现横向滚动。

具体步骤

1. HTML 结构：

   首先，我们需要一个包含所有元素的容器，并为每个元素添加相应的类名。

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

   

   ImgGood

   免费在线AI照片编辑器

   下载

   <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：自定义 CSS 变量，分别用于控制网格的列数、行数和间距，方便修改和维护。
   • --width: 根据列数和间距计算每个单元格的宽度，确保网格能够自适应容器的宽度。
   • display: grid;：将容器设置为 Grid 布局。
   • position: relative;：允许子元素使用绝对定位（如果需要）。
   • grid-auto-flow: column dense;：设置网格的自动填充方式为列，并启用密集填充，这意味着元素会尽可能地填充网格中的空缺位置。
   • grid-template-rows: repeat(var(--rows), 1fr);：定义网格的行数，1fr 表示每行的高度相等，并自动占据剩余空间。
   • grid-auto-columns: var(--width);：设置网格的列宽，使用之前计算好的 --width 变量。
   • grid-gap: var(--gap);：设置网格单元格之间的间距。
   • overflow-x: auto;：允许容器在水平方向上滚动，当内容超出容器宽度时，会出现滚动条。

注意事项

• 确保容器的宽度足够容纳 3x3 的网格。
• 可以根据实际需求调整 CSS 变量的值，例如修改列数、行数或间距。
• 如果需要更复杂的布局，可以考虑使用 Grid 布局的其他属性，例如 grid-template-areas。
• 如果需要在垂直方向上滚动，可以将 overflow-x: auto; 替换为 overflow-y: auto;。

总结

通过使用 CSS Grid 的 grid-auto-flow: column dense; 属性，结合自定义 CSS 变量和 overflow-x: auto; 属性，我们可以轻松地创建一个固定显示的 3x3 网格，并将超出网格范围的元素放置在右侧，并提供横向滚动条以便访问这些元素。这种布局方式适用于需要在有限空间内展示核心内容，同时提供更多内容供用户浏览的场景。