Flīzes ar pareizām atstarpēm CSS

Izveidosim flīzes ar atstarpēm, izmantojot margin, kuras darbosies bez problēmām. Sākotnēji pieņemsim, ka mums ir flīzes bez atstarpēm:

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>

css.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;
}

Результат:

Izveidosim horizontālās atstarpes starp elementiem, izmantojot margin.

Lai to izdarītu, visiem pēcteču elementiem iestatīsim margin-right uz vērtību 10px, un katram trešajam pēctecim iestatīsim šo margin uz nulli. Izmantosim pseudoklasi nth-child, iestatot parametru tā, lai iegūtu katru trešo elementu.

Palielināsim arī vecāka elementa platumu līdz 320px, lai atbrīvotu vietu atstarpēm, un paskatīsimies, kas mēs iegūstam:

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>

css.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;
}

Результат:

Tātad, viss darbojas. Noņemsim pēdējo elementu, lai pēdējā rindā būtu mazāk elementu, un pārliecināsimies, ka mums nevienā gadījumā neradīsies problēmas ar šo pēdējo rindu:

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>

css.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;
}

Результат: