Rrjeti me Hapësira të Sakta në CSS

Le të krijojmë një rrjet me hapësira në margjina që funksionon pa probleme. Le të supozojmë se fillimisht kemi një rrjet të tillë pa hapësira:

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

Результат:

Le të krijojmë hapësira horizontale midis elementeve duke përdorur margin.

Për ta bërë këtë, le të vendosim për të gjithë elementët-fëmijë margin-right në vlerën 10px, dhe për çdo të tretë fëmijë le ta rivendosim këtë margin në zero. Le të përdorim për këtë pseudo-klasën nth-child, duke vendosur parametrin në mënyrë që të marrim çdo element të tretë.

Le të rrisim gjithashtu gjerësinë e prindit në 320px, për të lënë vend për hapësirat, dhe le të shohim çfarë marrim:

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

Результат:

Pra, gjithçka funksionon. Le të heqim elementin e fundit në mënyrë që në rreshtin e fundit të ketë më pak elemente dhe të sigurohemi që me këtë nuk do të kemi probleme me këtë rresht të fundit:

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

Результат: