How to create first post, fifth post full width, rest in three columns and so on

Ricky :

I am new to wordpress development, I am learning how to make a theme from scratch. I don't want to use any plugin to achieve this.

How to create first post/ fifth post/ ninth post full width, rest in three columns and so on.

I tried this but first post is not repeating

<?php get_header() ?>
<div class="container-fluid">
	<div class="row">
		<?php $i = 0; while ( have_posts() ) : the_post();  ?>
		<?php if ($i++ == 0) : ?>
		<div class="col-sm-12 blog">
			<div class="row">
				<div class="col-sm-8 p-0">
					<?php the_post_thumbnail()?>
				</div>
				
				<div class="col-sm-4 align-self-center">
					<div><h3><?php the_title()?></h3></div>
					<div><?php the_excerpt()?></div>
				</div>
			</div>
		</div>
		<?php else: ?>
		<div class="col-sm-4 blog py-3">
			<?php the_post_thumbnail()?>
			<div><h3><?php the_title()?></h3></div>
			<div><?php the_excerpt()?></div>
		</div>
		<?php endif; ?>
		<?php endwhile ?>
	</div>
</div>
<?php get_footer() ?>

find my screen here

Fernando Almeida :

Your text isn't very clear but i'm assuming you want to have 1 big post and 3 tiny posts pattern.

To achieve this you will need to tell your code that the first one or when the post number is divided by 4 and the remainder is 0, the post should be big.

Code:

<?php get_header() ?>
<div class="container-fluid">
    <div class="row">
        <?php $i = 0; while ( have_posts() ) : the_post();  ?>
        <?php if ($i == 0 || $i % 4 == 0) : ?>
        <div class="col-sm-12 blog">
            <div class="row">
                <div class="col-sm-8 p-0">
                    <?php the_post_thumbnail()?>
                </div>

                <div class="col-sm-4 align-self-center">
                    <div><h3><?php the_title()?></h3></div>
                    <div><?php the_excerpt()?></div>
                </div>
            </div>
        </div>
        <?php else: ?>
        <div class="col-sm-4 blog py-3">
            <?php the_post_thumbnail()?>
            <div><h3><?php the_title()?></h3></div>
            <div><?php the_excerpt()?></div>
        </div>
        <?php endif; ?>
        <?php $i++;endwhile ?>
    </div>
</div>
<?php get_footer() ?>