Blog Grid Layout – 2+ cols

In the CSS file. Note – if I want to change the number of columns then I alter the minmax(300px, in the first line

.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:2.5em;width:70vw;margin-left:auto;margin-right:auto;}

.grid p{margin-bottom:2.5em;}

.grid-item{background:#f5f5f5;padding:20px;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:transform 0.2s ease;position:relative;}

.grid-item:hover{transform:scale(1.05);}

.grid-item h2{margin-top:0;}

.grid .read-more{display:flex;justify-content:center;align-items:center;width:50%;background:pink;position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:1em;}

.grid a.read-more{text-decoration:none;}

@media (max-width: 768px){
.grid{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));}
}

@media (max-width: 480px){
.grid{grid-template-columns:1fr;}
}

Then alter the code on index.php to include the following instead

	<main id="primary" class="site-main">

<div class="grid">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="grid-item">
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail('medium'); ?>
                </div>
            <?php endif; ?>
            <h2><?php the_title(); ?></h2>
            <?php the_excerpt(); ?>
        </div>
    <?php endwhile; endif; ?>
</div>

	</main><!-- #main -->