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

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

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

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

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

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

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

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

Задайте блокам ширину в процентах так, чтобы в плитке стало три блока в ряд.

Задайте блокам ширину в процентах так, чтобы в плитке стало два блока в ряд.

Задайте блокам ширину в процентах так, чтобы в плитке стало по одному блоку в ряд.

← →
↑