Kafelki z poprawnymi odstępami w CSS
Zróbmy naprawdę działające bez problemów kafelki z odstępami na marginesach. Załóżmy, że początkowo mamy takie kafelki bez odstępów:
<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;
}
:
Zróbmy poziome odstępy między
elementami za pomocą margin.
Ustawmy dla tego wszystkim elementom-potomkom
margin-right na wartość 10px,
a każdemu trzeciemu potomkowi wyzerujmy ten margin.
Użyjmy do tego pseudoklasy nth-child,
ustawiając w nim parametr tak, aby otrzymywać
każdy trzeci element.
Zwiększmy również szerokość rodzica do 320px,
aby zrobić miejsce na odstępy, i spójrzmy,
co u nas wychodzi:
<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;
}
:
A więc, wszystko działa. Usuńmy ostatni element, aby w ostatnim rzędzie było mniej elementów i upewnijmy się, że przy tym u nas nie będzie problemów z tym ostatnim rzędem:
<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;
}
:
Zrób kafelki po dwa elementy w rzędzie z
odległością między elementami w 20px.
