CSS - 如果元素不存在，则网格定位答案

【问题标题】：CSS - Grid positioning if element does not existCSS - 如果元素不存在，则网格定位
【发布时间】：2021-06-11 14:17:33
【问题描述】：

是否有可能以这样一种方式准备网格：如果给定元素不存在，它会插入可用的元素？例如，如果没有第一个元素，那么在第一行我们有“item middle item”？

 <div class="grid-container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="middle"></div>
 </div>

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;

    grid-template-areas:
    "first first first"
    ". middle ."
    ". . .";
}

Example

【问题讨论】：

标签： css sass css-grid

【解决方案1】：

如果您添加以下内容，则应该这样做：

.item:empty {
  display: none;
}

您可以在此示例中看到，所有内容都将回填到空的网格单元格中。

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;

    grid-template-areas:
    "first first first"
    ". middle ."
    ". . .";
}

.item:empty {
  display: none;
}

 <div class="grid-container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="middle">m</div>
 </div>

【讨论】：

谢谢你的回答，但在这种情况下我不会收到任何“项目”。
如果你用数据填充项目，你会的。
我的例子，只是展示“中间”如何回填的例子。如果您将任何数据放在任何“项目”div 元素中，那么它们将阻止“中间”移动回网格。您需要考虑的另一个选项：如果您需要检查非常具体的“项目”div，那么您可以增加“空”选择器的特异性。而且，在这些特定情况下，您可以更新 div 的 grid-area 属性。选项是无穷无尽的。
在这种情况下，关键是元素从循环中出现。因此，给定元素，如 first 的示例，可能根本不会出现，因此我无法检查它是否为空。 grid-area 绝对是一个很好的线索，但它必须遵循这样的原则，即如果根本没有第一个元素，则将下一行的元素放入网格区域。