how to put a <?php foreach?> in a column based grid - php

Question

I'm trying to put the output of a query, in php, in a column based grid. I was trying to get a pinterest like effect with four columns, where every post has a different height, but where they all have the same width.
If I try using display: grid;, I'll get a single column with all the posts, because the foreach will just dump it all there.
if i try using display: inline-grid; it becomes a row based grid, and the result isn't exactly pretty.
php code
class Post{
public static function getAll()
{
$conn = Db::getInstance();
$result = $conn->query('SELECT posts.*,users.firstname,users.lastname, users.picture FROM posts,users WHERE posts.user_id=users.id ');
return $result->fetchAll(PDO::FETCH_CLASS, __CLASS__);
}
}
html code
<?php foreach ($posts as $post): ?>
<div class="grid-container">
<div class="post">
<article >
<img src="<?php echo $post->picture; ?>" class="profilepic">
<p class="name"> <?php echo $post->firstname.' '.$post->lastname; ?> </p>
<p> <?php echo $post->date_created; ?> </p>
<img src="<?php echo $post->image; ?>" alt="">
<p> <?php echo $post->description; ?> </p>
More
</article>
</div>
</div>
<?php endforeach; ?>
css code
div.grid-container {
display: grid;
grid-column: 25% 25% 25% 25%;
}
is there any way to do this?

Answer 1

Make sure your post is placed around your <div class="post">. Currently you are creating a new <div class="grid-container"> on every loop iteration.
Also, instead of using the css property grid-column please use grid-template-columns as #Wendelin has shown above in the code snippet.
If that doesn't work, please paste a dump of your rendered HTML and CSS here.

Answer 2

Your css is wrong grid-column specifies in which column an item should be. What you want is grid-template-columns
div.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
also instead of using 25% you can use 1fr. Read more.
Basically fr stands for fraction. You define 1fr four times so together there are 4 fractions.
Then it divides the specified fractions by the total fractions and converts it to percent.
Example:
grid-template-columns: 1fr 1fr 1fr 1fr = grid-template-columns: 1/4 1/4 1/4 1/4 = grid-template-columns: 25% 25% 25% 25%
grid-template-columns: 2fr 1fr 2fr 3fr = grid-template-columns: 2/8 1/8 2/8 3/8 = grid-template-columns: 25% 12.5% 25% 37.5%
div.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.post {
height: 100px;
background-color: #eee;
margin: 5px;
padding: 5px;
text-align: center;
}
<div class="grid-container">
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
</div>