Kas ir CSS Grid?

CSS Grid Layout (vai vienkārši CSS Grid) ir divdimensiju izkārtojuma sistēma CSS. Tā ļauj pārvaldīt elementu izvietojumu gan pa rindām (horizontāli), gan pa kolonnām (vertikāli), radot sarežģītas tīkla struktūras saskarnes izveidei.

Galvenās CSS Grid koncepcijas ietver:

Grid Container: Elements, kam tiek piemērota īpašība display: grid vai display: inline-grid. Šī elementa pēcnācēji kļūst par Grid Items.
Grid Items: Tieši no Grid Container mantojoši elementi.
Grid Lines: Sadalāmās līnijas, kas veido tīklu. Tās var būt nosauktas vai ar skaitlisku indeksu.
Grid Tracks: Telpa starp divām līnijām — tas ir vai nu kolonna, vai rinda.
Grid Cells: Mazākā tīkla vienība, kas veidojas no rindu un kolonnas krustošanās.
Grid Areas: Taisnstūrveida tīkla apgabals, kas aizņem vienu vai vairākas šūnas.

Galvenās īpašības darbam ar CSS Grid:

Konteineriem:

display: grid | inline-grid;
grid-template-columns: Nosaka kolonnas.
grid-template-rows: Nosaka rindas.
grid-template-areas: Nosaka nosauktās zonas.
gap | row-gap | column-gap: Nosaka starpšūnu attālumus.
justify-items | align-items | place-items: Izlīdzināšana satura šūnās pa galveno un šķērsvirziena asi.
justify-content | align-content | place-content: Izlīdzināšana tīkla takelēs konteinerā.

Elementiem (Grid Items):

grid-column-start | grid-column-end | grid-column: Nosaka, kuras kolonnas līnijas aizņem elements.
grid-row-start | grid-row-end | grid-row: Nosaka, kuras rindu līnijas aizņem elements.
grid-area: Piešķir elementam nosaukto tīkla zonu vai nosaka tā atrašanās vietu ar līnijām.
justify-self | align-self | place-self: Izlīdzināšana pašam elementam šūnā.

CSS Grid nodrošina jaudīgus līdzekļus adaptīvu un sarežģītu izkārtojumu veidošanai, ievērojami vienkāršojot uzdevumus, kas iepriekš prasīja float, inline-block vai absolūtu pozicionēšanu.

.container {
  display: grid; /* Padarām elementu par Grid konteineru */
  grid-template-columns: 1fr 1fr 1fr; /* Izveidojam 3 vienādas platuma kolonnas */
  grid-template-rows: auto auto; /* Izveidojam 2 automātiskas augstuma rindas */
  gap: 10px; /* Pievienojam starpības starp šūnām */
}

.item {
  /* Elementi konteinerā automātiski kļūst par Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Pirmais elements aizņem kolonnas no 1 līdz 3 */
}