How to create a clean four-column, left-aligned, layout using justify-content: space-between

Question

I am trying to create a display blog post component with Flexbox that primarily uses justify-content: space-between. In a 4-column layout, it looks great when there are 4 posts to fill the row. The issue is when there are not 4 posts, but 2 or 3. At this point, the posts get spread out and it just looks sloppy. I want to use flexbox without any JavaScript, and I want to be able to have the layout be fully responsive. So at other breakpoints the column layout will drop to 3, 2, or even 1.

One of the things that I found that works great is adding an :after pseudo element to the wrapper with a set width that will fill in the empty space. The problem with that is it is not dynamic enough and will not work properly if I have a different number of post then the one I planned for.

For example: If I have 2 posts, each at 25% width, and then a pseudo element at 50% width, everything looks great. Once I have 3 posts it is not so great because the 50% pseudo element now needs to be 25%. Finally, if there is 4 I wouldn't need a pseudo element at all.

I am trying to work with using some of the SASS selectors, but for some reason when I try to target the parent with my :after element, it targets something else way up the DOM tree.

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .entry:nth-child( 2 ):last-of-type {
        :after & {
            content: "";
            flex-grow: 0;
            width: 50%;
        }
    }
    .entry:nth-child( 3 ):last-of-type {
        :after & {
            content: "";
            flex-grow: 0;
            width: 50%;
        }
    }
}

At this point I expected the :after element to target the parent class "content" but it doesn't. I also didn't think about how I would adjust it to be more dynamic and be able to handle multiple rows. I guess I could just do the math and make it something like .entry:nth-child( 3n+4 ):last-of-type {}, but I haven't even gotten there yet.

Sam, can you please elaborate on what kind of content you are trying to display? You said a blog post component, but I am not sure what you mean. I was going to work on a doodle for you, but it would be great to have some more details. — Iisrael, May 29 '19 at 13:30
Sure, so it would display the normal WordPress preview layout. Each post would be a stack column of Featured image, post title, post excerpt. — Sam Bush, May 29 '19 at 13:44
A couple comments - first, if you're trying to learn how to do something in CSS, you should probably leave Sass out of it -- you're just complicating your learning process unnecessarily. Second, you should be using `::after`, not `:after`. — TylerH, May 29 '19 at 14:05
Also, please add your markup. We need to see a [mcve] to help completely. — TylerH, May 29 '19 at 14:07
see https://stackoverflow.com/questions/55791036 for the four column layout and left aligning row with five column (idea is same though for four columns) you can refer https://stackoverflow.com/questions/39504320 — kukkuz, May 30 '19 at 02:00

score 0 · Answer 1 · answered May 29 '19 at 14:37

CSS-Grid would seem to be a better fit than flexbox here.

.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  margin-bottom: 1em;
}

.red .entry {
  background: red;
}

.blue .entry {
  background: blue;
}

.green .entry {
  background: green;
}

.entry {
  height: 50px;
}

<div class="content red">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="content blue">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="content green">
  <div class="entry"></div>
  <div class="entry"></div>
</div>

score -2 · Answer 2 · answered May 29 '19 at 14:43

-2

Here is a grid solution in Code Pen

For this to work in your query template it would look like this:

<div class="post-grid>
    //while loop here
    <div class="each-post">
        <img src="<?php get_the_post_thumbnail() ?>">
        <h2><?php get_the_title() ?></h2>
        <p><?php get_the_excerpt() ?></p>
    </div>
    // end loop here
</div>

answered May 29 '19 at 14:43

Iisrael

397
4
17

I am not sure why the down vote. If this doesn't solve your issue, please let me know why and I can see if I can re-work the code for you. – Iisrael May 29 '19 at 19:34

How to create a clean four-column, left-aligned, layout using justify-content: space-between

2 Answers2