Styling the last column of a flexbox

Question

I have to implement a design looking like this:

This will be the index.php page for WordPress and therefore it will be using the WordPress loop to output the blog articles as individual "resources".

Normally I would implement this as a flexbox, because the number of items is variable and I need it to be responsive, however this time our designer has added borders in between the items.

This would be fine but the borders are not included before or after the end of the rows. I cant solve this any of the pseudo selectors that I know of.

Currently my HTML and CSS look something like this:

section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

section div {
  display: flex;
  flex-direction: column;
  border-right: 1px solid red;
  padding-right: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
}

<section>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
</section>

Is this something I can solve with CSS grid and is there a way to achieve this using flexbox or another layout that isn't grid?

Not, this is not possible. Rows/Columns in Flexbox &/or CSS-Grid are not elements and so cannot be selected or styled with CSS. — Paulie_D, Sep 10 '18 at 09:48
@Paulie_D I dont intend to try but out of professional interest would it be possible via php or js? — Aonghas M, Sep 10 '18 at 09:50
one way would be to remove bolder with nth-child and media query, its a lot of work tho — Chris Li, Sep 10 '18 at 09:52
JS could do it but it would be quite complex based on the size of the element and its distance from the side of the container. — Paulie_D, Sep 10 '18 at 09:52
Related - https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-row — Paulie_D, Sep 10 '18 at 09:52
@ChrisLi yeah I thought of that but at that point I think we will just go back to the drawing board. Its not so important that I am willing to devote my time to that — Aonghas M, Sep 10 '18 at 09:53
@Vel thank you for trying but I need the last column to have no right hand border — Aonghas M, Sep 10 '18 at 09:54
@Vel unfortunately not as it has to be responsive. I think we have reached the conclusion that it probably isnt possible — Aonghas M, Sep 10 '18 at 09:58

score 4 · Accepted Answer · edited Sep 10 '18 at 10:10

This really depends on the background under the items, but if it is made of one color, you could use the solution of simply overlapping the left border with the pseudo element, like this:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-left: -20px;
}

section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 1px;
  background: #fff;
}

section div {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  border-left: 1px solid red;
  padding-left: 20px;
  margin-left: 20px;
  text-align: center;
}

<section>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
</section>

This also works but Chris Li's answer seems to be more suitable for my particular case. Thank you regardless — Aonghas M, Sep 10 '18 at 10:05
I eventually ended up using this solution and flex start to left align the content. Its not perfect but this was the most suitable answer — Aonghas M, Sep 10 '18 at 10:55

Chris Li · Answer 2 · 2018-09-10T11:21:31.440

I kind of have what you need, I'm displaying the right border with pseudo element and pushing it off screen if its the last element of a row, and some empty divs to push a new row to keep the layout.

section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}

section div {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding: 0 20px;
  position: relative;
}

section div:nth-last-child(9) ~ div{
    height: 0;
 width: 140px;
}

section div::after {
  content: '';
  position: absolute;
  border-right: 1px solid red;
  left: 100%;
  display: block;
  height: 100%;
}

section div:nth-last-child(9)::after {
 border: none;
}

section div p { width: 140px; }

  

<section>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
  </div>
  <div>
    <img class="http://lorempixel.com/output/fashion-q-c-200-200-6.jpg">
    <p>
      This is some text
    </p>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

This works. I just made a small edit to the padding but it seems you beat me to it. — Aonghas M, Sep 10 '18 at 10:04
i havent thought of a way to deal with the last row tho, flex-grow will make it expand, but it doesnt work without flex-grow — Chris Li, Sep 10 '18 at 10:07
So far its the closest I have got. Ill take a partial solution to none at all — Aonghas M, Sep 10 '18 at 10:08
I have the issue resolved now thanks to both of the answers on this question. I ended up using the other answer however yours was also very helpful. Thank you — Aonghas M, Sep 10 '18 at 11:15

Styling the last column of a flexbox

2 Answers2