Cards inside grid (col m4) - not behaving as expected (unorganized)

[ErikThiart]

I am not sure if this will make a whole lot of sense, but when I use bootstrap I would generate blog posts as cards in PHP and then use a grid width like col-sm-4 to create 3 cards next to each other and if I have 9 blog posts it would be 3 rows of 3 cards.

However trying to do that with beauter, the CSS just does not behave so well.

Example code:

  <div class="row">
    <div class="col m12">
      <h2>Lastest Articles</h2>
    </div>
    <?php
    // get the latest articles - limit it to 20
    $stmt = $pdo->prepare('SELECT * FROM posts ORDER BY id DESC LIMIT 20');
    $stmt->execute();
    $articles = $stmt->fetchAll();
    foreach($articles as $article){
    echo '
    <div class="col m4">
      <div class="card">
        <a href="/blog/'.$article['url'].'">
          <img src="../img/blog/'.$article['feature_image'].'" class="_width100">
        </a>
        <div class="-content _alignCenter mt-3">
          <p><strong>'.$article['title'].'</strong></p>
          <p class="_alignLeft">'.$article['intro'].'</p>
          <a class="button _small _teal" href="/blog/'.$article['url'].'">Read Article</a>
        </div>
      </div>
    </div>
    '; 
    }
    ?>
  </div>

Result:

If there are just 3 blog posts it works, but when there is more the layout gets messed up - I know this is not the intended use, but most of what I do is dynamic content so I won't know the end count of items beforehand, I need the CSS to be smart and know that we mean to keep it 3 in a row and start a new stack when we have more than 3 posts.

I hope this makes sense?

[ErikThiart]

Alright wrote a small fix, not the best, but it seems to get the job done.

/* article list */
.article-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
 }
/* If the browser window is 1100px or smaller, make it full width */
@media only screen and (max-width: 1100px) {
  .article-grid {
      grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
   }
}

[ramdeoshubham]

Hi Erik, I think this problem can be solved from beauter's side also. If possible, can you share with me the generated HTML output from the browser directly? That way I can play directly with the viewport and container sizes to see what's going on at the rendering level (not the backend)

Thanks for letting me know of this :)

[ErikThiart]

Hey, @ramdeoshubham I'll see if I can create a demo page and use the standard beauter code OR... if you have time on your hands, take this output and then use the col m4 -- that way you have the HTML to work with.

https://erikthiart.com/blog/

Side note: I think the SSL certificate for beauter expired