Kas yra CSS Grid?

CSS Grid Layout (arba paprastai vadinamas CSS Grid) — tai dviejų matmenų išdėstymo sistema CSS. Ji leidžia valdyti elementų išdėstymą tiek eilutėse (horizontaliai), tiek stulpeliuose (vertikaliai), kuriant sudėtingas tinklo struktūras sąsajų kūrimui.

Pagrindinės CSS Grid koncepcijos apima:

Grid Container: Elementas, kuriam taikoma savybė display: grid arba display: inline-grid. Šio elemento palikuonys tampa Grid Items.
Grid Items: Tiesioginiai Grid Container palikuonys.
Grid Lines: Skirstomosios linijos, sudarančios tinklą. Gali būti pavadintos arba turėti skaitmeninį indeksą.
Grid Tracks: Erdvė tarp dviejų linijų — tai arba stulpelis, arba eilutė.
Grid Cells: Mažiausia tinklo vienetas, sudarytas iš eilutės ir stulpelio sankirtos.
Grid Areas: Stačiakampė tinklo sritis, užimanti vieną arba kelias langelius.

Pagrindinės savybės darbui su CSS Grid:

Konteineriams:

display: grid | inline-grid;
grid-template-columns: Nustato stulpelius.
grid-template-rows: Nustato eilutes.
grid-template-areas: Nustato pavadintas sritis.
gap | row-gap | column-gap: Nustato tarpų tarp langelių.
justify-items | align-items | place-items: Išlyginimas turinio langeliuose pagal pagrindinę ir skersinę ašis.
justify-content | align-content | place-content: Išlyginimas tinklo takelių konteineryje.

Elementams (Grid Items):

grid-column-start | grid-column-end | grid-column: Nustato, kuriuos stulpelių linijas užima elementas.
grid-row-start | grid-row-end | grid-row: Nustato, kuriuos eilutės linijas užima elementas.
grid-area: Priskiria elementui pavadintą tinklo sritį arba nustato jo padėtį naudojant linijas.
justify-self | align-self | place-self: Išlyginimas paties elemento langelyje.

CSS Grid siūlo galingus įrankius kuriant adaptuojamus ir sudėtingus maketus, žymiai palengvindamas užduotis, kurios anksčiau reikalavo naudoti float, inline-block ar absoliutų pozicionavimą.

.container {
  display: grid; /* Padarome elementą Grid konteineriu */
  grid-template-columns: 1fr 1fr 1fr; /* Sukuriame 3 vienodo pločio stulpus */
  grid-template-rows: auto auto; /* Sukuriame 2 automatinio aukščio eilutes */
  gap: 10px; /* Pridedame tarpus tarp langelių */
}

.item {
  /* Elementai konteineryje automatiškai tampa Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Pirmas elementas užima stulpus nuo 1 iki 3 */
}