Multi Column Blog List Layout

[michael_hull1]

All,

I have searched through a lot of info and cannot seem to find a good answer for creating a multi column layout for module_blogpostlist. I am proficient in css and html, but not programming. I have used the insert module feature and created a template with no luck building what I need. I can easily build a vertical stack, but cannot figure out how to make it work horizontal. Using flex, I have the following;

<div class="flex col-12">
     <div class="flex-auto">column 1</div>
     <div class="flex-auto">column 2</div>
    <div class="flex-auto">column 3</div>
</div>

The first div sets up a 12 col grid and 'flex auto' uses available space to fit 3 equal columns. Can anyone help me with how to create the programming necessary to inject the module_blogpostlist posts into the 3 column layout and limit the default number of post to display and include pagination?

Thanks in advance. I apologize if this is a duplicate post, I have done a fair amount of research here with no luck. I come in peace and greatly appreciate any guidance.

[Robert_K__Bell]

On the css side, are these flex classes actually using flexbox?

If so, you'll likely find this reference quite useful. Particularly the flex-direction, flex-wrap and flex-basis properties.

[michael_hull1]

Hi Robert,

Thank you so very much for the reply. I am not having any problems with Flex. The layout displays in 3 columns as expected. The issue is the programming. My question is more focused around how I can get Liquid/programming to display the blog post list items in my 3 column layout and show 'x' amount of posts while also including pagination.

My apologies if I did not accurately describe my issue in post. Again, greatly appreciate the response.

[Robert_K__Bell]

The blog layout documentation mentions pagination tags.

(Ah, no worries, it's just the way I interpreted "I can easily build a vertical stack, but cannot figure out how to make it work horizontal")