Šta je CSS Grid?

CSS Grid Layout (или просто CSS Grid) je dvodimenzionalni sistem za raspored v CSS. To pozvoljava upravlenieto na razpolozhenieto na elementite kak po redove (horizontално), taka i po koloni (vertikalno), sŭzdavaiki slozhni mrezesti strukturi za izgrajdane na interfeisi.

Osnovnite kontseptsii na CSS Grid vklyuchvat:

Grid Container: Element, kum koyto se prilaga svojstvoto display: grid ili display: inline-grid. Potomtsite na tozi element stavat Grid Items.
Grid Items: Pryami potomtsi na Grid Container.
Grid Lines: Razdelitelnite linii, obrazuvashchi mrezhata. Mogat da bŭdat imenovani ili da imat chislov indeks.
Grid Tracks: Prostranstvoto mezhdu dve linii na mrezhata — tova e ili kolona, ili red.
Grid Cells: Nay-malkata edinitsa na mrezhata, obrazuvana ot presечението na red i kolona.
Grid Areas: Pravougulna oblast na mrezhata, zaемаща edna ili nyakolko kletki.

Klyuchovi svojstva za rabota s CSS Grid vklyuchvat:

Za konteynera:

display: grid | inline-grid;
grid-template-columns: Opredelya kolonite na mrezhata.
grid-template-rows: Opredelya redovete na mrezhata.
grid-template-areas: Opredelya imenovanite oblasti na mrezhata.
gap | row-gap | column-gap: Opredelya razstoyaniyata mezhdu kletkite.
justify-items | align-items | place-items: Podravnyavane na sŭdŭrzhanieto vŭtre v kletkite po glavnata i poperechnata os.
justify-content | align-content | place-content: Podravnyavane na redovete na mrezhata vŭtre v konteynera.

Za elementite (Grid Items):

grid-column-start | grid-column-end | grid-column: Opredelya koi linii na koloni zaema elementŭt.
grid-row-start | grid-row-end | grid-row: Opredelya koi linii na redove zaema elementŭt.
grid-area: Naznacha na elementŭ imenovana oblast na mrezhata ili opredelya negovoto polozhenie chrez linii.
justify-self | align-self | place-self: Podravnyavane na samiya element vŭtre v negovata kletka.

CSS Grid predostavya moshni sredstva za sŭzdavane na adaptivni i slozhni maketi, znachitelno ulесняvayki zadachite, koito po-rano iziskvat izpolzvaneto na float, inline-block ili absolyutno pozitsionirane.

.container {
  display: grid; /* Pravi elementa Grid konteyner */
  grid-template-columns: 1fr 1fr 1fr; /* Sŭzdava 3 koloni s ednakva shirina */
  grid-template-rows: auto auto; /* Sŭzdava 2 reda s avtomatichna vysochina */
  gap: 10px; /* Dobavya razstoyaniya mezhdu kletkite */
}

.item {
  /* Elementite vŭtre v konteynera avtomatichno stavat Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Parviat element zaема koloni ot 1 do 3 */
}