Different size grid with specific order PHP - php

Question

I need to make a grid similar to this:
Few keywords: specific size pattern, bigger points in higher.
All boxes are custom posts - lets call every box a post.
All different sizes posts have different meta_key called $size:
Yellow/big $size= 1;
Orange/medium $size= 2;
Blue/small $size= 3;
All posts have also meta_key value called $points which are totally different for each (can be anything from 0 to 10000). $points is currently used as orderby.
This is how I call all these posts:
$custom_posts= new WP_Query(array(
'post_type' => 'custom-post',
'meta_key' => 'points',
'orderby' => 'meta_value_num'
));
if ( $custom_posts->have_posts() ) :
echo '<div id="post-items"><ul class="row list-unstyled">';
while ( $custom_posts->have_posts() ) : $custom_posts->the_post();
$size= get_post_meta( $post->ID, 'post_size', true );
$points = get_post_meta( $post->ID, 'post_points', true );
echo '<li>';
if($size == 1) {
?>
//Big yellow box HTML
<?php
}
else if($size == 2) {
?>
//Medium orange box HTML
<?php
}
else if($size == 3) {
?>
//Small blue box HTML
<?php
}
echo '</li>';
endwhile;
echo '</ul></div>';
wp_reset_query();
else :
?>
<p class="text-muted"><?php _e( 'No Posts.', 'aa' ); ?></p>
<?php
endif;
QUESTION:
Any ideas how to query them in specific $size pattern also considering $points (higher points in higher, but do not break the order - LIKE ON MY IMAGE)?
Im working my arse off as we speak (it's 3rd day now on this problem!!) & I would appriciate every idea, comment or source!
What could be useful but I haven't found a working solution yet (I'll add more if I come across some):
Using modulus:
PHP loop: Add a div around every three items syntax
UPDATE 1:

Answer 1

I am not a Wordpress expert by any stretch, so there may be an easier way to do this with a foreach loop, but here it is with a while as you have it in the question:
// This will be used as a counter
$i=0;
while ( $custom_posts->have_posts() ) : $custom_posts->the_post();
// Get size based on counter
switch($i) {
case 0:
case 5:
$size = 1;
break;
case 1:
case 2:
case 3:
case 4:
case 6:
case 7:
$size = 2;
break;
default:
$size = 3;
}
$points = get_post_meta( $post->ID, 'post_points', true );
echo '<li>';
if($size == 1) {
?>
//Big yellow box HTML
<?php
}
else if($size == 2) {
?>
//Medium orange box HTML
<?php
}
else if($size == 3) {
?>
//Small blue box HTML
<?php
}
echo '</li>';
// Increment the counter
$i++;
endwhile;
If I understand your question correctly, this should always display the sizes in the order that you have them (1,2,2,2,2,1,2,2,3,3,3,3,3,3, etc.). Also, if there are less than that number of entries, it will still work, and if there are more, size 3 is the default, so anything else after this will display as 3.