# Адаптивная плиточка с отступами на CSS

Давайте теперь сделаем плиточку с отступами. Вот пример того, что у нас должно получится:

Для начала сделаем стили родителю блоков:

`.parent { display: flex; flex-wrap: wrap; width: 95%; margin: 50px auto; }`

Теперь зададим стили самим блокам, не задавая им ширину, но задав нижний марджин в процентах:

`.child { box-sizing: border-box; height: 100px; padding: 20px; margin-bottom: 1.5%; border: 1px solid green; }`

Теперь напишем код, который поставит четыре блока в ряд, задав соответствующие отступы:

`@media (min-width: 1000px) { .child { width: calc(100% / 4 - 1.5% * 3 / 4); } .child:not(:nth-child(4n)) { margin-right: 1.5%; } }`

А теперь поставим три блока в ряд:

`@media (min-width: 700px) and (max-width: 1000px) { .child { width: calc(100% / 3 - 1.5% * 2 / 3); } .child:not(:nth-child(3n)) { margin-right: 1.5%; } }`

А теперь поставим два блока в ряд:

`@media (min-width: 400px) and (max-width: 700px) { .child { width: calc(100% / 2 - 1.5% * 1 / 2); } .child:not(:nth-child(2n)) { margin-right: 1.5%; } }`

Один блок в ряд:

`@media (max-width: 400px) { .child { width: 100%; } }`

Давайте соберем весь код вместе:

`.parent { display: flex; flex-wrap: wrap; width: 95%; margin: 50px auto; } .child { box-sizing: border-box; height: 100px; padding: 20px; margin-bottom: 1.5%; border: 1px solid green; } @media (max-width: 400px) { .child { width: 100%; } } @media (min-width: 400px) and (max-width: 700px) { .child { width: calc(100% / 2 - 1.5% * 1 / 2); } .child:not(:nth-child(2n)) { margin-right: 1.5%; } } @media (min-width: 700px) and (max-width: 1000px) { .child { width: calc(100% / 3 - 1.5% * 2 / 3); } .child:not(:nth-child(3n)) { margin-right: 1.5%; } } @media (min-width: 1000px) { .child { width: calc(100% / 4 - 1.5% * 3 / 4); } .child:not(:nth-child(4n)) { margin-right: 1.5%; } }`

Сделайте плитку, которая при уменьшении экрана будет иметь сначала восемь элементов в ряд, потом четыре элемента в ряд, потом два элемента в ряд. Пусть отступ между элементами составляет `0.75%`.

Модифицируйте предыдущую задачу так, чтобы отступ между элементами составлял фиксированное значение в `20px`.

←→
↑