在 foreach 循环中每行显示不同的列数

Question

我从数据库中获取了一些目的地城市列表，并希望将其显示在视图中。

这是我的正常做法

<?php
$this->db->select('*');
$citydata = $this->db->get('cities')->result_array();

foreach ($citydata as $citydatas){?>

<div class="col-lg-4">
<img src="<?=$citydatas['banner];?>" />
</div>

<? } ?>

上面的代码每行会显示3列，

但我想要的是不同的方法，我需要在第一行显示 2 列，然后在第二行显示 3 列。

和

另一种方法是 - 第一行三列，但第一列将占用一半屏幕，其他两列将占用另一半，在第二行中，前两列占用一半，然后第三列使用 col-6 占用其余半屏

这是我正在寻找的第一个网格样式

这是第二种网格样式

我的第一种风格的方法，下面的方法好用吗？

<?php
$this->db->select('*');
$citydata = $this->db->get('cities')->result_array();

$i = 1;

foreach ($citydata as $citydatas){?>

<div class="<?php if($i++ == 1 || $i++ == 2){ echo "col-lg-6";}else{echo"col-lg-4";}?>">
<img src="<?=$citydatas['banner];?>" />
</div>

<? } ?>

Answer 1

您可以使用nth-child 选择器和 CSS 网格来获得所需的结果。

第一个网格样式

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
}

img:nth-child(6n + 1),
img:nth-child(6n + 2){
  grid-column: span 2;
}

img {
  width: 100%;
  height: 100%;
}

<div class="grid-container">
  <img src="https://picsum.photos/id/10/400" />
  <img src="https://picsum.photos/id/20/400" />
  <img src="https://picsum.photos/id/30/400" />
  <img src="https://picsum.photos/id/40/400" />
  <img src="https://picsum.photos/id/50/400" />
  <img src="https://picsum.photos/id/60/400" />
</div>

第二种网格样式

对于第二种网格样式，您只需更改nth-child 选择器，其余代码将相同。

img:nth-child(6n),
img:nth-child(6n + 1) {
  grid-column: span 2;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
}

img:nth-child(6n),
img:nth-child(6n + 1) {
  grid-column: span 2;
}

img {
  width: 100%;
  height: 100%;
}

<div class="grid-container">
  <img src="https://picsum.photos/id/10/400" />
  <img src="https://picsum.photos/id/20/400" />
  <img src="https://picsum.photos/id/30/400" />
  <img src="https://picsum.photos/id/40/400" />
  <img src="https://picsum.photos/id/50/400" />
  <img src="https://picsum.photos/id/60/400" />
</div>

PHP 代码

使用以下代码使用 PHP 呈现此布局

<div class="grid-container">
  <?php foreach($citydata as $citydatas): ?>
    <img src="<?=$citydatas['banner]?>"/>
  <?php endforeach; ?>
</div>