php - 具有不同高度的动态布局，但在一个模式中

Question

我不确定这是否可行，但我正在尝试创建这样的布局:

元素是<div>里面有文字，来自 PHP foreach环形。 从数据库中提取时，有一个 if有条件的可以添加一个类，我可以在其中控制元素的宽度/高度。这将使元素变大。

我研究过 CSS Grid 和 Flexbox，但找不到解决方案。大框的数量可能因页面而异，但应始终保持相同的模式。

我想知道最好的解决方案是否是以某种方式在 PHP 中重新排列数组以重新排列元素的输出。

Answer 1

我真的尝试过使用 CSS Grid 找到解决方案，但不幸的是，我只是找到了一些可能性，这些可能性并没有像您想要的那样使整个事情变得动态。但我认为目前没有其他选择 - 如果有人知道办法，请指正。 ;)

据我所知，目前 css 中也没有选择器可以让您准确地定位类的每个第二个元素，不幸的是，这使它变得更加复杂。

在我的第一个解决方案中，我构建了 :nth-child(even) 选择器。对于这种方法，具有要寻址的类的元素必须以正确的顺序排列到父元素，以便索引正确。因此，您必须调整 PHP 代码，以便较大的元素已经位于 HTML 输出中的正确位置。

对于第二个解决方案(我不太喜欢)，我尝试在 general sibling combinator 上构建整个解决方案选择器。有了这个，我单独处理页面上的所有现有元素，如:.class ~ .class = second element 或 .class ~ .class ~ .class = 第三个元素。因此，不必调整 PHP 代码，并且您在这部分获得“更多灵 active ”，但您将限制每页的元素数量，因为它们的设置会固定在 CSS 代码中。

现在有两种解决方案:

---

<强>1。 :nth-child(even) 方式

.grid {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 20px;
  grid-auto-flow: row dense;
}

.grid__item--large {
  grid-column: -3 / span 2;
  grid-row: span 2;
}

.grid__item--large:nth-child(even) {
  grid-column: 1 / span 2;
}

/* just for the snippet styling */

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    margin: 20px;
  }

  .grid__item {
    min-height: 200px;
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
  }
    
  .grid__item--large {
    min-height: 400px;
  }

/* --- */

<div class="grid">

  <div class="grid__item grid__item--large">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4</div>
  <div class="grid__item">5</div>

  <div class="grid__item grid__item--large">6</div>
  <div class="grid__item">7</div>
  <div class="grid__item">8</div>
  <div class="grid__item">9</div>
  <div class="grid__item">10</div>

  <div class="grid__item grid__item--large">11</div>
  <div class="grid__item">12</div>
  <div class="grid__item">13</div>
  <div class="grid__item">14</div>
  <div class="grid__item">15</div>

  <div class="grid__item grid__item--large">16</div>
  <div class="grid__item">17</div>
  <div class="grid__item">18</div>
  <div class="grid__item">19</div>
  <div class="grid__item">20</div>

</div>

---

<强>2。 “通用兄弟组合器”方式

.grid {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 20px;
  grid-auto-flow: row dense;
}

.grid__item--large {
  grid-column: -3 / span 2;
  grid-row: span 2;
}

.grid__item--large ~ .grid__item--large {
  grid-column: 1 / span 2;
}

.grid__item--large ~ .grid__item--large ~ .grid__item--large {
  grid-column: -3 / span 2;
}

.grid__item--large ~ .grid__item--large ~ .grid__item--large  ~ .grid__item--large { 
  grid-column: 1 / span 2;
}

/* just for the snippet styling  */

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    margin: 20px;
  }

  .grid__item {
    min-height: 200px;
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
  }
    
  .grid__item--large {
    min-height: 400px;
  }

/* --- */

<div class="grid">

  <div class="grid__item">1</div>
  <div class="grid__item grid__item--large">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4</div>
  <div class="grid__item grid__item--large">5</div>

  <div class="grid__item">6</div>
  <div class="grid__item">7</div>
  <div class="grid__item">8</div>
  <div class="grid__item">9</div>
  <div class="grid__item grid__item--large">10</div>

  <div class="grid__item">11</div>
  <div class="grid__item">12</div>
  <div class="grid__item">13</div>
  <div class="grid__item">14</div>
  <div class="grid__item">15</div>

  <div class="grid__item grid__item--large">16</div>
  <div class="grid__item">17</div>
  <div class="grid__item">18</div>
  <div class="grid__item">19</div>
  <div class="grid__item">20</div>

</div>

---

我希望这能以某种方式提供帮助。 :)