In my theme I have a grid which shows featured posts. This one I really like, but posts order in it are not as I like:

.jpg

On the photo from link above you can see in red rectangles current order of posts in it, below them is green rectangles for illustration of how would I like to display them. Biggest grid would be for latest post published.

code for showing this in theme is here (if needed i could send entire file with codes):

function inner($posts, $td_column_number = '') {

    $buffy = '';

    if (!empty($posts)) {

        $post_count = 0;

        foreach ( $posts as $post ) {
            if ($post_count == 0) {
                $buffy .= '<span class="td-big-grid-flex-column">';
            }

            if ($post_count < 2) {
                $td_module_flex = new td_module_flex_6($post, $this->get_all_atts());
                $buffy .= $td_module_flex->render($post_count);

                $post_count++;
                continue;
            }

            if ( $post_count == 2 ) {
                $buffy .= '</span>';
                $buffy .= '<div class="td-big-grid-flex-scroll-holder">';

                $td_module_flex = new td_module_flex_7($post, $this->get_all_atts());
                $buffy .= $td_module_flex->render($post_count);

                $post_count++;
                continue;
            }

            if ( $post_count > 2 ) {
                $td_module_flex = new td_module_flex_6($post, $this->get_all_atts());
                $buffy .= $td_module_flex->render($post_count);

                $post_count++;
                continue;
            }

            $post_count++;
        }

In my theme I have a grid which shows featured posts. This one I really like, but posts order in it are not as I like:

https://i.sstatic/Ldzkg.jpg

On the photo from link above you can see in red rectangles current order of posts in it, below them is green rectangles for illustration of how would I like to display them. Biggest grid would be for latest post published.

code for showing this in theme is here (if needed i could send entire file with codes):

function inner($posts, $td_column_number = '') {

    $buffy = '';

    if (!empty($posts)) {

        $post_count = 0;

        foreach ( $posts as $post ) {
            if ($post_count == 0) {
                $buffy .= '<span class="td-big-grid-flex-column">';
            }

            if ($post_count < 2) {
                $td_module_flex = new td_module_flex_6($post, $this->get_all_atts());
                $buffy .= $td_module_flex->render($post_count);

                $post_count++;
                continue;
            }

            if ( $post_count == 2 ) {
                $buffy .= '</span>';
                $buffy .= '<div class="td-big-grid-flex-scroll-holder">';

                $td_module_flex = new td_module_flex_7($post, $this->get_all_atts());
                $buffy .= $td_module_flex->render($post_count);

                $post_count++;
                continue;
            }

            if ( $post_count > 2 ) {
                $td_module_flex = new td_module_flex_6($post, $this->get_all_atts());
                $buffy .= $td_module_flex->render($post_count);

                $post_count++;
                continue;
            }

            $post_count++;
        }

• posts

• This is a CSS-specific question and hence out of scope for this StackExchange, you should probably ask over at StackOverflow. – kero Commented Jan 21, 2020 at 10:36
• My first thought was that you could solve it via CSS grid (placing the #1 item in the center, make it span 2 rows), but this would result in 2-1-3 / 4-1-5 instead of the desired 2-1-4 / 3-1-5, so I guess it is a bit more complex than that. – kero Commented Jan 21, 2020 at 10:37
• even that is better option, how to do that with css? – bhcrow Commented Jan 22, 2020 at 12:00

1 Answer 1

As I said in my comment, if 2-1-3 / 4-1-5 instead of the desired 2-1-4 / 3-1-5 is also OK for placement, you can do this quite easily with CSS grid. MDN has a lot of resources about this topic.

Check out this fiddle, where I changed a MDN example a bit to your use case. The magic is here:

.wrapper > #first {
  grid-row-start: 1;
  grid-column-start: 2;
  grid-row-end: span 2;
}

grid-row-start and grid-column-start places the element on the grid (and auto places all other elements to fill the remaining space). Then grid-row-end: span 2 tells CSS to make the element span 2 rows.