Shopify Dev - Display blog posts in rows

Question

Currently on my blog page in Shopify, the blog articles display in a UL as list items, one after the other down the page.

I would like them to display in rows of 4. The Code I have currently is this:

<ul id="blog-articles" class="desktop-4 tablet-4 mobile-2">
    {% for article in blog.articles %}
    <li class="single-article">

      <div class="article-body desktop-12">
        <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>

        <a href="{{ article.url }}">
        <div class="article-content">
          {% if article.image %}<img class="article-image" src="{{ article.image | img_url: 'grande' }}" alt="{{ article.title }}">{% endif %}
        <div class="clear"></div>
        </div> 
        </a>
      </div>
    </li>
    {% endfor %}
  </ul>

So it's obviously looping in the articles, but I'm not sure how to display them left to right, 4 on each row...

My site is here: https://www.okuhstudios.com/blogs/news and my new code comes in at the bottom of the page underneath all of the <hr> lines...

score 1 · Accepted Answer · edited May 23 '17 at 12:02

Try this:

#blog-articles {
    display: flex;
    flex-wrap: wrap;
}

.single-article {
    flex: 1 0 21%; /* flex-grow, flex-shrink, flex-basis */
}

This code will make the ul a flex container and allow the child elements to wrap.

Each child element is given an initial width of 21% (flex-basis: 21%). This permits a maximum of four items per row. If there is any extra space on the line, it's consumed with flex-grow: 1.

The only reason I didn't use flex-basis: 25% is because I don't know if you have margins, padding or borders, which may cause the fourth item to wrap. You could make it 25% if it works for you.

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

Shopify Dev - Display blog posts in rows

1 Answers1