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

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

实现原理

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

具体步骤

1. HTML 结构：

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

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

   

   BlackBox AI

   AI编程助手，智能对话问答助手

   下载

   
     
   ONE
     
   TWO
     
   THREE
     
   FOUR
     
   FIVE
     
   SIX
     
   SEVEN
     
   EIGHT
     
   NINE
     
   TEN
     
   ELEVEN
     
   TWELVE
     
   THIRTEEN
     
   FOURTEEN
   

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 网格，并将超出网格范围的元素放置在右侧，并提供横向滚动条以便访问这些元素。这种布局方式适用于需要在有限空间内展示核心内容，同时提供更多内容供用户浏览的场景。