# Плиточка с корректными отступами на CSS

Давайте сделаем действительно работающую без проблем плиточку с отступами на марджинах. Пусть у нас изначально есть такая плиточка без отступов:

`<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>` `.parent { display: flex; flex-wrap: wrap; width: 300px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid green; }`

:

Давайте сделаем горизонтальные отступы между элементами с помощью `margin`.

Поставим для этого всем элементам-потомкам `margin-right` в значение `10px`, а каждому третьему потомку занулим этот `margin`. Используем для этого псевдокласс `nth-child`, задав в нем параметр так, чтобы получать каждый третий элемент.

Увеличим также ширину родителя до `320px`, чтобы дать место под отступы, и посмотрим, что у нас получается:

`<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>` `.parent { display: flex; flex-wrap: wrap; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 10px; border: 1px solid green; } .child:nth-child(3n) { margin-right: 0; }`

:

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

`<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>` `.parent { display: flex; flex-wrap: wrap; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 10px; border: 1px solid green; } .child:nth-child(3n) { margin-right: 0; }`

:

## Вертикальные отступы

Давайте теперь добавим еще и вертикальные отступы. Для этого всем потомкам зададим `margin-bottom` в значении `10px`:

`<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>` `.parent { display: flex; flex-wrap: wrap; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; border: 1px solid green; } .child:nth-child(3n) { margin-right: 0; }`

:

Как мы видим, все работает хорошо, за исключением того, что последний ряд отступает от родителя. Чаще всего это не критично.

Сделайте плиточку по два элемента в ряд с расстоянием между элементами в `20px`.

Сделайте плиточку по три элемента в ряд с расстоянием между элементами в `20px`.

Сделайте плиточку по четыре элемента в ряд с расстоянием между элементами в `20px`.

←→
↑