grid-template-area：根据条件事件自动调整网格大小

Question

如果出现某种情况，我会遇到自动调整网格元素大小的问题。

考虑以下网格：

grid-template-areas: 
    "1  2   2   2"
    "3  4   4   4"
    "5  6   7   8";

我需要的是 6 来占据 7 和 8 的空间，如果 7 和 8 不存在于 html 中，这可能会发生。

这将使网格模板看起来像这样：

grid-template-areas: 
    "1  2   2   2"
    "3  4   4   4"
    "5  6   6   6";

CSS 有办法做到这一点吗？

HTML 代码如下所示：

<div class="details-etherlns-incident">
   <div class="1">Text</div>
   <div class="2">Text</div>
                    
   <div class="3">Text</div>
   <div class="4">Text</div>
   
   <div class="5">Text</div>
   <div class="6">Text</div>
                    
<?php if (someCondition): ?>

   <div class="7">Text</div>
   <div class="8">Text</div>

<?php endif; ?>
</div>

预先感谢您的时间和帮助。

Answer 1

你可以像下面这样做。您只需将一条规则应用于 3 个选择器。第 6 项只有在最后一项才会被考虑

.details-etherlns-incident {
  display: grid;
  gap: 5px;
  margin: 20px;
}
.details-etherlns-incident :nth-child(2),
.details-etherlns-incident :nth-child(4),
.details-etherlns-incident :nth-child(6):last-child {
   grid-column: 2/span 3;
}

 

.details-etherlns-incident > * {
  border:1px solid;
  padding: 10px;
}

<div class="details-etherlns-incident">
   <div class="1">Text 1</div>
   <div class="2">Text 2</div>
                    
   <div class="3">Text 3</div>
   <div class="4">Text 4</div>
   
   <div class="5">Text 5</div>
   <div class="6">Text 6</div>
                    
   <div class="7">Text 7</div>
   <div class="8">Text 8</div>

</div>

<div class="details-etherlns-incident">
   <div class="1">Text 1</div>
   <div class="2">Text 2</div>
                    
   <div class="3">Text 3</div>
   <div class="4">Text 4</div>
   
   <div class="5">Text 5</div>
   <div class="6">Text 6</div>

</div>