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

本文将详细讲解如何使用 CSS Grid 布局创建一个 3x3 的网格，并且当元素数量超过9个时，允许用户通过横向滚动来查看剩余的元素。这种布局方式常用于需要在有限的空间内展示大量内容，同时保证首屏展示效果的场景。

实现原理

核心思路是利用 CSS Grid 的 grid-auto-flow 属性控制元素的排列方向，并结合 overflow-x 属性实现横向滚动。通过 CSS 自定义属性，我们可以方便地控制网格的列数、行数和间距。

具体实现步骤

1. HTML 结构:

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

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

   

   BiLin AI

   免费的多语言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 样式:

   接下来，我们需要为容器 .cards 设置 CSS 样式，以实现 3x3 的网格布局和横向滚动效果。

   .cards {
     /* 定义列数 */
     --cols: 3;
   
     /* 定义行数 */
     --rows: 3;
   
     /* 定义网格间距 */
     --gap: 5px;
   
     /* 计算每个元素的宽度 */
     --width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
   
     display: grid;
     position: relative;
     /* 设置元素排列方向为 column dense */
     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: 自定义属性，用于计算每个网格元素的宽度，确保元素能够均匀分布在容器中。
   • display: grid: 将容器设置为 Grid 布局。
   • position: relative: 允许子元素使用绝对定位。
   • grid-auto-flow: column dense: 设置元素的排列方向为列，并启用 dense 模式，尽可能填充网格中的空缺。
   • grid-template-rows: repeat(var(--rows), 1fr): 定义网格的行数，1fr 表示每行占据相等的可用空间。
   • grid-auto-columns: var(--width): 定义网格的列宽，使用之前计算好的 --width 值。
   • grid-gap: var(--gap): 设置网格元素之间的间距。
   • overflow-x: auto: 允许容器在水平方向上滚动，当内容超出容器宽度时显示滚动条。

注意事项

• 可以根据实际需求调整 --cols、--rows 和 --gap 的值，以改变网格的布局。
• grid-auto-flow: column dense 属性确保元素按照列的顺序排列，并尽可能填充网格中的空缺。如果不需要填充空缺，可以将 dense 移除。
• overflow-x: auto 属性只在内容超出容器宽度时才会显示滚动条。如果需要始终显示滚动条，可以使用 overflow-x: scroll。

总结

通过使用 CSS Grid 布局和 grid-auto-flow 属性，我们可以轻松创建一个固定大小的网格，并将剩余元素放置在网格右侧，通过横向滚动的方式展示。这种布局方式适用于需要在有限空间内展示大量内容，同时保证首屏展示效果的场景。通过调整 CSS 自定义属性，可以灵活控制网格的列数、行数和间距，从而实现不同尺寸的网格布局。