How to make a 5 column section using a while loop with my latest posts in my frontpage.php file for Wordpress

Question

I was wondering if somebody could help me find a solution for the follwing question: I would like to add the right code to have my latest post (from the while loop) in a 5 column section. Can anybody tell me the best way to do this?

Kind regards,

Joris

<div class="container">
 <div class="container container--narrow page-section">
  <h2 class="headline headline--small-plus t-center">Laatste nieuws</h2>
 <?php 
 $homepagePosts = new WP_Query(array(
  'posts_per_page' => 5,
  'category_name' => 'Posts'
 ));
 while ($homepagePosts->have_posts()) {
  $homepagePosts->the_post(); ?>
 <div class="event-summary">
  <a class="event-summary__date event-summary__date--beige t-center" href="#">
   <span class="event-summary__month"><?php the_time('M'); ?></span>
   <span class="event-summary__day"><?php the_time('d'); ?></span>
  </a>
 <div class="event-summary__content">
  <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
  <p><?php echo wp_trim_words(get_the_content(), 18); ?><a href="<?php the_permalink(); ?>" class="nu gray">Lees meer</a></p>
 </div>
</div>
<?php } wp_reset_postdata();
?>

I was trying to make a 5 column section, but get stucked on how I could loop it with my most recent postst.

Answer 1

You would use CSS grid to create that layout. Each .event-summary should take one column of the grid container. If you want to specify how many columns they should take, use grid-column: span...; with the number of columns you want it to take up. See below example.

.page-section {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

.page-section .headline {
   grid-column: 1 / -1;
}

.page-section .event-summary {
   grid-column: span 1; /* replace with column number you prefer */
}