Mis on CSS Grid?

CSS Grid Layout (või lihtsalt CSS Grid) on kahe mõõtmega paigutussüsteem CSS-is. See võimaldab hallata elementide paigutust nii ridade (horisontaalselt) kui ka veergude (vertikaalselt) kaupa, luues keerukaid võrgustruktuure kasutajaliideste ehitamiseks.

CSS Grid põhiprintsiibid hõlmavad:

Grid Container: Element, millele rakendatakse omadust display: grid või display: inline-grid. Selle elemendi järeltulijad muutuvad Grid Items-ks.
Grid Items: Otse Grid Container-i järeltulijad.
Grid Lines: Jooned, mis jagavad võrgustiku. Need võivad olla nimetatud või numbrilised.
Grid Tracks: Ruumi kahe joone vahel — see on kas veerg või rida.
Grid Cells: Väikseim võrguelement, mis tekib rida ja veeru ristumisel.
Grid Areas: Ristkülikukujuline võrguala, mis hõlmab ühte või mitut rakku.

Peamised omadused CSS Grid-iga töötamiseks:

Konteineritele:

display: grid | inline-grid;
grid-template-columns: Määrab veerud.
grid-template-rows: Määrab read.
grid-template-areas: Määrab nimetatud alad.
gap | row-gap | column-gap: Määrab vahed rakkude vahel.
justify-items | align-items | place-items: Joondab sisu rakkudes peamise ja risti suuna järgi.
justify-content | align-content | place-content: Joondab võrguliinid konteineri sees.

Elementidele (Grid Items):

grid-column-start | grid-column-end | grid-column: Määrab, milliseid veeruliine element hõivab.
grid-row-start | grid-row-end | grid-row: Määrab, milliseid rida-jooni element hõivab.
grid-area: Määrab elementile nimetatud ala või positsiooni joontel.
justify-self | align-self | place-self: Joondab elementi enda rakus.

CSS Grid pakub võimsaid tööriistu paindlike ja keerukate paigutuste loomiseks, oluliselt lihtsustades ülesandeid, mis varem nõudsid float, inline-block või absoluutset positsioneerimist.

.container {
  display: grid; /* Teeme elemendist Grid konteineri */
  grid-template-columns: 1fr 1fr 1fr; /* Loome 3 sama laiusega veergu */
  grid-template-rows: auto auto; /* Loome 2 automaatse kõrgusega rida */
  gap: 10px; /* Lisame vahed rakkude vahele */
}

.item {
  /* Elementid konteineris muutuvad automaatselt Grid Items-ks */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Esimene element hõivab veerud 1 kuni 3 */
}