Вертикальные отступы для плиточки в CSS
Давайте теперь добавим еще и вертикальные
отступы. Для этого всем потомкам зададим
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.