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

Question

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

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

我研究过CSS Grid＆Flexbox，看不到解决方案。较大的框的数量可以在页面之间变化，但应始终保持相同的模式。

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

Answer 1

希望能帮到你。

var row=5; // total row layout
var count=0;
var strLayout='';
for(var i=0;i<row*2;i++){
  if(count%3==0){
   strLayout +='<div style="float:left;width:100px;height:100px;"><div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div>'; 
   strLayout +='<div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div>';
   strLayout +='<div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div>';
   strLayout +='<div style="float:left;width:40px;height:40px;margin: 5px;;background:black"></div></div>';
  }else{
   strLayout +='<div style="float:left;width:90px;height:90px;margin: 5px;background:black"></div>'; 
  }
  if (count==3){
	  count=0;
  }else{
	  count++;
  }
}
$('#layout').html(strLayout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   
<div id="layout" style="float:left;width:200px;background:white">
</div>

Answer 2

我真的试图用CSS Grid找到一个解决方案，但不幸的是，我只是在可能性上并没有让整个事情变得像你想要的那样充满活力。但我认为目前没有其他选择 - 如果有人知道，请纠正我。 ;）

根据我的知识，目前css中还没有选择器可以让你准确地解决一个类的每个第二个元素，不幸的是它使它变得更复杂。

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

对于第二个解决方案（我更喜欢），我尝试在general sibling combinator选择器上构建整个事物。通过这个，我可以单独地解决页面上所有现有元素：.class ~ .class = second element或.class ~ .class ~ .class = third element。因此，不需要调整PHP代码，并且您可以在此部分获得“更大的灵活性”，但是每页的元素数量会受到限制，因为它们的设置将在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>

---

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