0

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.imgur.com/GzGwRXl.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++;
        }
  • This is a CSS-specific question and hence out of scope for this StackExchange, you should probably ask over at StackOverflow. – kero Jan 21 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 Jan 21 at 10:37
  • even that is better option, how to do that with css? – bhcrow Jan 22 at 12:00
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.