CSS - гибкая сетка начинается слева [дубликат]

Вы могли бы немного уменьшить поля, чтобы они лучше подходили и продолжали выравнивать гибкие элементы влево с помощью justify-content: flex-start; или вместо этого вы можете использовать CSS Grid и определить необходимое gap, а также общее количество столбцов, которое вам нужно (в данном случае 3), с помощью сетки вы можете даже избежать процентных вычислений и просто сообщить каждому элементу использовать часть доступного пространства.

Самым большим преимуществом CSS Grid, я думаю, будет то, что вы избегаете напрасной траты места, которое может остаться в процентах, а также вам не нужно ничего менять в элементах, если вы хотите добавить или удалить столбцы. [ 117]

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: calc(33.3% - 2px);
}

.block-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(20px, auto);
  grid-gap: 2px;
  border: 1px solid grey;
  padding: 5px;
}

.block-grid__item{
  background-color: red;
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

<div class="block-grid">
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
  <div class="block-grid__item"></div>
</div>

Еще один способ думать об этом - использовать элемент обтекания (.block__item), который обеспечивает расстояние между элементами с внутренней подкладкой. Эти упаковочные элементы физически расположены рядом друг с другом, но обеспечивают визуальное различие между их содержимым (.block__content).

Преимущество этого заключается в том, что вам не нужно включать интервал в свои расчеты для ширины или гибкой основы. Если вы хотите изменить интервал, просто обновите padding.

^{* Обратите внимание, что вам нужно изменить блочную модель ваших элементов на border-box, чтобы воспользоваться этим.}

* {
  box-sizing: border-box;
}

.block {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 900px;
  border: 1px solid lightgrey;
  padding: 2px;
}

.block__item {
  flex: 0 1 calc(100% / 3);
  padding: 2px;
}

.block__content {
  height: 20px;
  background-color: grey;
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 400px) {
  .block__item {
    flex-basis: 50%;
  }
}

<div class="block">
  <div class="block__item">
    <div class="block__content">1</div>
  </div>
  <div class="block__item">
    <div class="block__content">2</div>
  </div>
  <div class="block__item">
    <div class="block__content">3</div>
  </div>
  <div class="block__item">
    <div class="block__content">4</div>
  </div>
  <div class="block__item">
    <div class="block__content">5</div>
  </div>
</div>