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

【问题标题】：dynamic layout with different heights, but in a pattern具有不同高度的动态布局，但在模式中
【发布时间】：2018-07-26 20:49:16
【问题描述】：

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

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

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

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

【问题讨论】：

是什么让盒子变大了？你试过什么？
我尝试了各种 Bootstrap、CSS 网格和 CSS flexbox 解决方案。较大的框基本上是由 WordPress 元字段确定的。如果有字段，我添加大类，如果没有，我添加小类。数据库中的项目没有特定的顺序。
我怀疑这只能用 css 来完成。您需要以某种方式对数据进行分组。在循环中或之前。

标签： php css flexbox grid css-grid

【解决方案1】：

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

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

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

对于第二个解决方案（我不太喜欢），我尝试在 general sibling combinator 选择器上构建整个东西。有了这个，我单独处理页面上所有现有的元素，例如：.class ~ .class = 第二个元素 或.class ~ .class ~ .class = 第三个元素。因此，无需调整 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>

我希望这能有所帮助。 :)

【讨论】：

【解决方案2】：

希望能帮到你。

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>

【讨论】：