CSS Grid配合PHP实现MySQL分组数据按组展示的最优方案咨询

方案可行性确认 #

你提出的根据子项数量动态生成类名的方案完全可行，已知品种最大数量仅为10，提前编写对应CSS规则的维护成本极低，也能很好匹配你需要的布局效果。

具体实现建议 #

• 第一步：PHP后端预处理数据 #

  从MySQL查询时直接按树木分组聚合，同步计算每个分组下的品种数量，避免前端重复统计，示例代码如下：

  // MySQL分组聚合查询逻辑
  $sql = "SELECT t.tree_id, t.tree_name, 
          GROUP_CONCAT(v.variety_name SEPARATOR '|') AS varieties, 
          COUNT(v.id) AS variety_count 
          FROM trees t LEFT JOIN tree_varieties v ON t.id = v.tree_id 
          GROUP BY t.id ORDER BY t.tree_name";
  $result = $conn->query($sql);
  $treeList = [];
  while ($row = $result->fetch_assoc()) {
      $row['varieties'] = explode('|', $row['varieties']);
      $treeList[] = $row;
  }
  

• 第二步：HTML结构渲染 #

  渲染时直接拼接动态类名，优化写法避免引号嵌套问题：

  <?php foreach ($treeList as $tree): ?>
  <div class="tree-group variety-row-<?= $tree['variety_count'] ?>">
    <div class="tree-name"><?= htmlspecialchars($tree['tree_name']) ?></div>
    <div class="variety-list">
      <?php foreach ($tree['varieties'] as $variety): ?>
        <div class="variety-item"><?= htmlspecialchars($variety) ?></div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endforeach; ?>
  

• 第三步：CSS Grid规则配置 #

  用属性选择器统一公共样式，仅单独配置不同数量对应的列数即可：

  /* 公共基础样式 */
  .tree-group {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
  }
  .tree-name {
    font-weight: bold;
    grid-column: 1 / 2;
  }
  .variety-list {
    display: grid;
    gap: 8px;
    grid-column: 2 / -1;
  }
  /* 按品种数量配置列数，最多写到10即可 */
  .variety-row-1 .variety-list { grid-template-columns: repeat(1, 1fr); }
  .variety-row-2 .variety-list { grid-template-columns: repeat(2, 1fr); }
  .variety-row-3 .variety-list { grid-template-columns: repeat(3, 1fr); }
  .variety-row-4 .variety-list { grid-template-columns: repeat(4, 1fr); }
  .variety-row-5 .variety-list { grid-template-columns: repeat(5, 1fr); }
  ...
  .variety-row-10 .variety-list { grid-template-columns: repeat(10, 1fr); }
  

• 更优简化方案（无需多套CSS规则） #

  如果不想提前写10套CSS规则，可以直接在渲染时把列数写入内联样式，后续即使品种数量上限提升也无需修改CSS，维护成本更低：

  <div class="variety-list" style="grid-template-columns: repeat(<?= $tree['variety_count'] ?>, 1fr)">
  

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