Адаптивная плиточка с отступами на 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.