<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
function pc_grid_horizontal($array, $size) {
// compute <td> width %ages
$table_width = 100;
$width = intval($table_width / $size);
// define how our <tr> and <td> tags appear
// sprintf() requires us to use %% to get literal %
$tr = '<div class="tr">';
$td = "<div class='td' style=\"width:$width%%\">%s</div>";
// open table
$grid = "<div class='table'><div class='tbody'>$tr";
// loop through entries and display in rows of size $sized
// $i keeps track of when we need a new table tow
$i = 0;
foreach ($array as $e) {
$grid .= sprintf($td, $e);
$i++;
// end of a row
// close it up and open a new one
if (!($i % $size)) {
$grid .= "</div>$tr";
}
}
// pad out remaining cells with blanks
while ($i % $size) {
$grid .= sprintf($td, ' ');
$i++;
}
// add </div>, if necessary
$end_tr_len = strlen($tr) * -1;
if (substr($grid, $end_tr_len) != $tr) {
$grid .= '</div>';
} else {
$grid = substr($grid, 0, $end_tr_len);
}
// close table
$grid .= '</div></div>';
return $grid;
}
echo pc_grid_horizontal(["aaaa1", "aaaa2", "aaaa3", "aaaa4"], 3);
?>
<style type="text/css">
.table {
width: 500px;
border: 1px solid #000;
display: block;
margin: 50px auto;
}
.tbody {
width: 100%;
display: block;
}
.tr {
display: flex;
padding: 2px;
}
.td {
width: 33%;
border: 1px solid red;
padding: 15px;
}
</style>
</body>
</html>