How to leave enough space to align elements with space-evenly and :after?

Question

I use the pseudo element :after to align the last row of the block list on the left. I use space-evenly to justify the blocks. My problem is that the block on the last line is not aligned with the user because :after takes up space. How can I solve this problem?

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  &:after {
    content: "";
    flex: auto;
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

Answer 1

The

:after pseudo-element takes up space in the Flex container and interferes with the alignment of the items in the last row, which is the root cause of your problem. Using margins on the :after pseudo-element as an alternative to flex auto is one way to solve this problem. This is the latest version of CSS:

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: line wrapping;
  justify-content: spatially even;
  &:after {
    content: "";
    flex: none; /* disable flex grow/shrink */
    width: calc((100% - (100px * 4)) / 4); /* calculate border width */
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

/* Add margin to last item in each line */
.exposegrid > *:nth-child(4n+4) {
  right margin: 0;
}

Answer 2

   .exposegrid {
      width: 500px;
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px); /* this will create cells that will fill the space , if there is space of five, then each row will have five*/
      gap: 10px /*instedt of margin, use gap to space cells*/
    }
    .exposetab {
      width: 100px;
      height: 66px;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

<div class="exposegrid">
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
    <div class="exposetab"></div>
  </div>