Php Laravel循环-将项目放置在重复容器中

每个事件都有一个foreach循环。我刚刚意识到主包装和里面的3个项目都是同一个事件

第一个、第二个和第三个事件应该将它放在一个包装器中。接近。然后，应打开4、5、6的新主包装，依此类推

我对解决方案的初步想法：

我想也许可以用：

@if ($loop->first)

将“第一个”放置在主要位置。->'第二个是，第二个是，等等。但由于这是一个循环，我不能静态地解释第一个、第二个、第三个以及以后的数百个

当前代码

@foreach( $events['events'] as $event )

  <!-- Product Grid -->
  <div class="flex-grid">
    <div class="flex__direction--column">
      <div class="flex__direction--row">

        <!-- 1ST ITEM -->
        <div class="item item--primary">

          <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
            <div class="a-card__media-wrapper">
              <div class="a-card__box-content">
                <div class="a-card__date-wrapper">
                  <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                </div>
              </div>
              <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
              <div class="a-card__heading-wrapper">
                <a class="a-card__media-link" href="#">
                  <h2 class="a-card__heading">
                    {{ $event['title'] }}
                  </h2>
                </a>
              </div>
            </div>
          </div>

        </div>

        <div class="item flex__direction--column">
          <div class="item">
            <!-- 2ND ITEM -->
            <div class="flex__direction--row">
              <div class="item item--secondary">

                <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
                  <div class="a-card__media-wrapper">
                    <div class="a-card__box-content">
                      <div class="a-card__date-wrapper">
                        <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                      </div>
                    </div>
                    <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
                    <div class="a-card__heading-wrapper">
                      <a class="a-card__media-link" href="#">
                        <h2 class="a-card__heading">
                          {{ $event['title'] }}
                        </h2>
                      </a>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <!-- 3RD ITEM -->
            <div class="flex__direction--row">
              <div class="item item--tertiary">

                <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
                  <div class="a-card__media-wrapper">
                    <div class="a-card__box-content">
                      <div class="a-card__date-wrapper">
                        <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                      </div>
                    </div>
                    <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
                    <div class="a-card__heading-wrapper">
                      <a class="a-card__media-link" href="#">
                        <h2 class="a-card__heading">
                          {{ $event['title'] }}
                        </h2>
                      </a>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

@endforeach

@foreach（$events['events']作为$event）
{{$date['0']}
{{$date['1']}
{{$date['2']}
{{$date['0']}
{{$date['1']}
{{$date['2']}
{{$date['0']}
{{$date['1']}
{{$date['2']}
@endforeach

这是电流输出。

我正在努力实现的目标：

---

代码有点像快速复制粘贴：） 你会分类的

var $counter = 0;
foreach ($sorce_array as $event) {
$counter++;
if (($counter % 3) == 1)  { 

<div class="flex-grid">
    <div class="flex__direction--column">
      <div class="flex__direction--row">
<div class="item item--primary">

          <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
            <div class="a-card__media-wrapper">
              <div class="a-card__box-content">
                <div class="a-card__date-wrapper">
                  <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                </div>
              </div>
              <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
              <div class="a-card__heading-wrapper">
                <a class="a-card__media-link" href="#">
                  <h2 class="a-card__heading">
                    {{ $event['title'] }}
                  </h2>
                </a>
              </div>
            </div>
          </div>

        </div>
} 

If ((($counter % 3) ==2)) {
<div class="item flex__direction--column">
          <div class="item">
}

If (($counter % 3) != 1)  { 
<div class="flex__direction--row">
              <div class="item item--secondary">

                <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
                  <div class="a-card__media-wrapper">
                    <div class="a-card__box-content">
                      <div class="a-card__date-wrapper">
                        <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                      </div>
                    </div>
                    <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
                    <div class="a-card__heading-wrapper">
                      <a class="a-card__media-link" href="#">
                        <h2 class="a-card__heading">
                          {{ $event['title'] }}
                        </h2>
                      </a>
                    </div>
                  </div>
                </div>

              </div>
            </div>
    }

If (($counter % 3) == 0)  { 
</div>
</div>
</div>
</div>
</div>
}
}

var$counter=0；
foreach（$sorce\u数组作为$event）{
$counter++；
如果（$计数器%3）=1{
{{$date['0']}
{{$date['1']}
{{$date['2']}
} 
如果（（$计数器%3）=2））{
}
如果（$counter%3）！=1{
{{$date['0']}
{{$date['1']}
{{$date['2']}
}
如果（$计数器%3）=0{
}
}

等等，什么？你能更好地解释你的问题吗？@Troyer。好的，我试试看。第一个事件应该放在第一个最大的盒子里。第二个事件应该放在第二个（右上框）中。右下框中的第三个事件。然后在第4、5、6个项目中重复整个过程，以此类推。我会马上更新图像。你考虑过使用收集块方法吗@特罗耶。有什么想法吗？我也添加了一个新的图像来解释我所追求的。