Best way to echo two rows of two? - php

Question

I am retrievieng from a query 4 rows.
This rows recover the id (to set the href), the image path and the title.
For example the code for the first row is:
<div class="row">
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">The title</p>
</a>
</div>
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">Another title</p>
</a>
</div>
</div>
I achieve this using:
echo "<div class='table'>"
for($i=0;$i<2;$i++){
echo "<div class='row'>"
for($j=0;$j<2;$j++){
echo "<div class='col'>"
echo "<a href='id'>
<img src='file'>
<p class='titulo-noticia'>".$title."</p>
</a>"
echo "</div>"
} //end col loop
echo "</div>"
} //end row loop
echo "</div>"
CSS is:
.col{
display: table-cell;
}
.row{
display: row;
}
.table{
display: table;
}
Is this the correct way to show a 2*2 matrix of php content? Or there is a better way using css?
Thank you.

Answer 1

I don't think there's really a best way, but here's another way with CSS. Basically just echo out all your query results into one container div without worrying about rows. Display each result in a div with float: left and width: 50% and they'll make their own rows.
<div class="matrix">
<?php while ($row = however_youre_fetching_them()): ?>
<div class="cell">
<a href="<?= $row['id'] ?>">
<img src="<?= $row['path'] ?>">
<p><?= $row['title'] ?></p>
</a>
</div>
<?php endwhile ?>
</div>
And the CSS
.cell {
height: 100px;
width: 50%;
float: left;
}
Setting a constant height on the cells should ensure that the rows line up properly.

Answer 2

You over-complicating this.
You need to do it by chunks, array_chunk() perfect for that:
foreach(array_chunk($array, 2) as $chunks){
//<div class="row">
foreach($chunk as $chunk){
//<div class="col"></div>
}
//</div>
}