Cik daudz esat strādājis ar CSS? Vai pazīstat Grid Layout?

Es ļoti bieži strādāju ar CSS, tostarp izmantojot Grid Layout, lai veidotu sarežģītus un pielāgotus izkārtojumus. CSS Grid ir jaudīgs rīks divu dimensiju tīklu veidošanai, kas ļauj viegli pārvaldīt elementu izvietojumu rindās un kolonnās.

Vienkārša Grid Layout piemērs:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Tas izveidos tīklu ar 3 kolonnām un 2 rindām ar vienmērīgu elementu sadalījumu. Grid Layout ir noderīgs, veidojot sarežģītas un elastīgas saskarnes, neizmantojot float vai flexbox līdzīgas funkcijas.