I have created a custom template for Wordpress in php. The template calls all content and is used in an empty blog post. This is my Loop Code

<?php 
 $args = array(
    'post_type' => array('product', 'post'),
    'tax_query' => array(
        'relation' => 'OR',
        array(
            'taxonomy' => 'category',
            'field'    => 'term_id',
            'terms'    => ['82', '85'],
        ),
        array(
            'taxonomy' => 'product_cat',
            'field'    => 'term_id',
            'terms'    => ['96'],
        ),
    ),
    'posts_per_page' => 999,
    'orderby'        => 'meta_value_num',
    'meta_key'       => 'score_value',
    'order'          => 'DESC',
);

$custom_query = new WP_Query($args);
if ($custom_query->have_posts()) : while($custom_query->have_posts()) : $custom_query->the_post();

?> 

And this is the code for dislaying the results:

<div >
    <div >
        <div >
            <figure >
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                </a>
            </figure>
            <div >
                <div >
                    <div >
                    <?php the_field('score_value'); ?>
                    </div>
                        <h2 >
                            <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                            </a>
                        </h2>
                </div>
            </div>
        </div>
    </div>
</div>

Everything works fine, but in a row within one column:

1. Post
2. Post
3. Post
4. Post
5. ...

However, I want a two-column layout like:

• Post 1 Post 2
• Post 3 Post 4
• Post 5 Post ...

I've already tried this CSS, but one post is split into two columns and not one post in each column:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

I'm unsure if the solution is css at all or if I have to solve it with php and how. I look forward to possible solutions. thank you

CodePudding user response：

have you tried css grid? something like this:

ul {
    display: grid;
    grid-template-columns: 1fr 1fr;  // split into 2 cols
    gap: 1rem; // space between columns, adjust for your needs
}