Search code examples
htmlcsswordpressflexboxrelated-posts

Confused with UL & Flex CSS, 2 Rowws, 2 Columns, total 4 Items


I am trying to style my WordPress Posts into 2 wide and 2 rows.

I created Frankenstein!

How can I get this to be like this image.

enter image description here

Click me for Dev Website

PHP/HTML

    <ul class="svcta_listing_related_posts_ul">
    <li class="svcta_listing_related_posts_li">
        <?php foreach( $posts as $post): ?>
        <?php setup_postdata($post); ?>
        <?php the_post_thumbnail('listing_post_thumbnail'); ?> 
            <div class="svcta_listing_related_posts_link"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
    </li>
        <?php endforeach; ?>
</ul>

CSS

.svcta_listing_related_posts_ul {
  list-style: none;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.svcta_listing_related_posts_li {
margin-right: 75px;
}

Solution

  • you can do this using css grid. check code snippet below

    .svcta_listing_related_posts_ul {
      list-style: none;
      margin: 0px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      display: grid;
      grid-template-columns: auto auto;
    }
    
    .svcta_listing_related_posts_li {
      margin-right: 75px;
    }
    <ul class="svcta_listing_related_posts_ul">
      <li class="svcta_listing_related_posts_li">
        <?php foreach( $posts as $post): ?>
        <?php setup_postdata($post); ?>
        <?php the_post_thumbnail('listing_post_thumbnail'); ?>
        <div class="svcta_listing_related_posts_link">
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>test
          </a>
        </div>
      </li>
     <li class="svcta_listing_related_posts_li">
        <?php foreach( $posts as $post): ?>
        <?php setup_postdata($post); ?>
        <?php the_post_thumbnail('listing_post_thumbnail'); ?>
        <div class="svcta_listing_related_posts_link">
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>test
          </a>
        </div>
      </li>
     <li class="svcta_listing_related_posts_li">
        <?php foreach( $posts as $post): ?>
        <?php setup_postdata($post); ?>
        <?php the_post_thumbnail('listing_post_thumbnail'); ?>
        <div class="svcta_listing_related_posts_link">
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>test
          </a>
        </div>
      </li>
     <li class="svcta_listing_related_posts_li">
        <?php foreach( $posts as $post): ?>
        <?php setup_postdata($post); ?>
        <?php the_post_thumbnail('listing_post_thumbnail'); ?>
        <div class="svcta_listing_related_posts_link">
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>test
          </a>
        </div>
      </li>
    
      <?php endforeach; ?>
    </ul>

    below highlighted part should be wrap in li enter image description here