Плиточка с автошириной блоков в CSS

В предыдущем уроке в нашей плиточке получалось так, что ширина элементов и их отступов в сумме должна давать ширину родителя. Это немного не универсально. Давайте сделаем так, чтобы элементы автоматически подстраивались под ширину родителя.

Пусть у нас есть вот такой родитель:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

Пусть элементы этой плиточки стоят по 4 блока в ряд:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Зададим ширину наших блоков так, чтобы каждый из них занимал четверть родителя. Для этого поставим их размер в 25%:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}