Как выровнять блоки по левому краю?

Question

[LastGeneral]

Как можно выровнять блоки, в последней колонке, по правому краю? Ширина блоков фиксированная, они должны выравниваться по правому и левому краю, кроме блоков в последнем ряду. Пробовал :after, но так как блоков всегда может быть разное количество, например когда остается 2 или 3 в последнем ряду, то позиционируется не совсем правильно.

<div class="content">
  <ul class="products">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

.content {
  padding: 50px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  width: 240px;
  height: 200px;
  background-color: #ccc;
}

Comments

[Ankhena]

Проще всего заменить на гриды.

Флексами это делать неудобно. Либо на JS задавать ширину ::after через кастомные свойства либо дописывать пустые блоки.

[LastGeneral]

Ankhena, Так и сделал

Answer 1

[LastGeneral]

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  grid-gap: 20px;
  justify-content: space-between; 
}

Answer 2

[Semantic.Moscow]

https://habr.com/ru/post/467049/

Answer 3

[wadowad]

Для родительского блока не указывать gap, выравнивание сделать по правому краю, отступы компенсировать отрицательным margin:

display: flex;
flex-wrap: wrap;
justify-content: end;
margin:  0 -20px;

Ширину дочерних элементов считать от родительского так, чтобы они полностью занимали строку. Например, так:

margin:  10px 20px
width: calc(20% - 20px);