如何将CSS Grid元素按类别分组，实现谷歌云开发者速查表式布局？

我想要复刻谷歌云开发者速查表的布局效果。

目前我的类别名称大盒子（.capabilityContainer）和关联的小盒子（.technologyContainer）都在CSS Grid中线性排列，如图所示。我知道可能需要单独设置每个盒子的位置，或根据屏幕尺寸调整数组中盒子的顺序，但不知从何入手，该如何解决？

核心思路 #

谷歌云速查表的布局是基于固定网格的区域规划，而非自动流式排列。你需要放弃auto-fill的自动列设置，改用固定列数的网格，再通过grid-column/grid-row手动控制大盒子的位置，让小盒子自然填充其周围空间。

具体实现步骤 #

1. 定义固定列数的基础网格
   先确定网格的基础列数（比如参考谷歌云用6列），替换原有的自动列设置：

   #mapView {
     display: grid;
     /* 固定6列，每列宽度自适应分配 */
     grid-template-columns: repeat(6, 1fr);
     grid-auto-rows: 150px;
     gap: 2px; /* 用gap替代border分隔盒子，布局更简洁 */
     background-color: #f9fafb;
   }
   
   .hidden #mapView {
     display: none;
   }
   

2. 手动定位大类别盒子
   给每个.capabilityContainer单独指定占据的网格区域，避免线性排列。比如：

   .capabilityContainer {
     border: 2px solid white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
   }
   
   /* 第一个类别容器：占第1-2列、第1-2行 */
   .capabilityContainer:nth-child(1) {
     grid-column: 1 / span 2;
     grid-row: 1 / span 2;
     background-color: #e3f2fd;
   }
   
   /* 第二个类别容器：占第3-4列、第1-2行 */
   .capabilityContainer:nth-child(5) {
     grid-column: 3 / span 2;
     grid-row: 1 / span 2;
     background-color: #fce4ec;
   }
   
   /* 第三个类别容器：占第5-6列、第1-3行 */
   .capabilityContainer:nth-child(9) {
     grid-column: 5 / span 2;
     grid-row: 1 / span 3;
     background-color: #fff3e0;
   }
   

3. 小盒子自动填充剩余空间
   保持小盒子的基础样式，它们会自动填充网格中未被大盒子占据的单元格：

   .technologyContainer {
     border: 2px solid white;
     background-color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 8px;
     text-align: center;
   }
   

4. 响应式适配小屏幕
   在移动端切换为自动流式布局，避免布局错乱：

   @media (max-width: 768px) {
     #mapView {
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     }
     /* 小屏幕下大盒子改为占1列1行 */
     .capabilityContainer {
       grid-column: span 1 !important;
       grid-row: span 1 !important;
     }
   }
   

5. HTML结构示例
   可以按“大盒子+对应小盒子”的逻辑组织DOM，Grid会按指定位置渲染，不受DOM顺序限制：

   <div id="mapView">
     <!-- 第一个大盒子 -->
     <div class="capabilityContainer">计算</div>
     <!-- 对应小盒子 -->
     <div class="technologyContainer">Compute Engine</div>
     <div class="technologyContainer">App Engine</div>
     <div class="technologyContainer">Kubernetes Engine</div>
     <div class="technologyContainer">Cloud Functions</div>
   
     <!-- 第二个大盒子 -->
     <div class="capabilityContainer">存储</div>
     <!-- 对应小盒子 -->
     <div class="technologyContainer">Cloud Storage</div>
     <div class="technologyContainer">Cloud SQL</div>
     <div class="technologyContainer">Firestore</div>
     <div class="technologyContainer">Memorystore</div>
   
     <!-- 第三个大盒子 -->
     <div class="capabilityContainer">数据分析</div>
     <!-- 对应小盒子 -->
     <div class="technologyContainer">BigQuery</div>
     <div class="technologyContainer">Dataflow</div>
     <div class="technologyContainer">Dataproc</div>
   </div>
   

关键注意点 #

• 禁用grid-auto-flow: dense，它会打乱手动规划的布局顺序，精准定位更可控。
• 提前在草图上规划大盒子的位置，避免网格区域重叠。
• 用gap代替盒子边框实现分隔，减少布局计算的复杂度。

内容的提问来源于stack exchange，提问作者pyrtibun