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

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

Напишем сначала HTML код:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> </div>`

Давайте теперь добавим стили родителю блоков:

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

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

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

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

Давайте напишем код, который поставит четыре блока в ряд:

`@media (min-width: 1000px) { .child { width: 25%; } }`

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

`@media (min-width: 700px) and (max-width: 1000px) { .child { width: 33.3333%; } }`

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

`@media (min-width: 400px) and (max-width: 700px) { .child { width: 50%; } }`

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

`@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; border: 1px solid green; } @media (max-width: 400px) { .child { width: 100%; } } @media (min-width: 400px) and (max-width: 700px) { .child { width: 50%; } } @media (min-width: 700px) and (max-width: 1000px) { .child { width: 33.3333%; } } @media (min-width: 1000px) { .child { width: 25%; } }`

Переделайте мой код так, чтобы ширина блоков вычислялась через функцию `calc`.

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

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

←→
↑