Mi az a CSS Grid?

A CSS Grid Layout (vagy egyszerűen CSS Grid) egy kétdimenziós elrendezési rendszer a CSS-ben. Lehetővé teszi az elemek elhelyezésének kezelését mind sorokban (vízszintesen), mind oszlopokban (függőlegesen), összetett rácsszerkezeteket létrehozva az interfészek építéséhez.

A CSS Grid főbb fogalmai a következők:

Grid konténer: Az elem, amelyre a display: grid vagy display: inline-grid tulajdonságot alkalmazzuk. Ennek az elemnek az leszármazottai Grid elemekké válnak.
Grid elemek: A Grid konténer közvetlen leszármazottai.
Grid vonalak: Az elválasztó vonalak, amelyek a rácsot alkotják. Lehetnek nevük vagy numerikus indexük.
Grid sávok: A két vonal közötti tér — ez lehet oszlop vagy sor.
Grid cellák: A legkisebb egység, amely egy sor és egy oszlop metszéspontjából jön létre.
Grid területek: Egy téglalap alakú terület a rácson, amely egy vagy több cellát foglal el.

A CSS Grid használatához kapcsolódó főbb tulajdonságok:

A konténerhez:

display: grid | inline-grid;
grid-template-columns: Meghatározza a rács oszlopait.
grid-template-rows: Meghatározza a rács sorait.
grid-template-areas: Meghatározza a rács nevű területeit.
gap | row-gap | column-gap: Meghatározza a cellák közötti rések méretét.
justify-items | align-items | place-items: A tartalom igazítása a cellákon belül a fő- és keresztirányú tengely mentén.
justify-content | align-content | place-content: A rács vonalak igazítása a konténeren belül.

Az elemekhez (Grid elemek):

grid-column-start | grid-column-end | grid-column: Meghatározza, melyik oszlopvonalakat foglalja el az elem.
grid-row-start | grid-row-end | grid-row: Meghatározza, melyik sorvonalakat foglalja el az elem.
grid-area: Egy névvel ellátott rácsterületet rendel az elemhez, vagy a vonalak segítségével határozza meg a pozícióját.
justify-self | align-self | place-self: Az elem saját igazítása a cellán belül.

A CSS Grid erőteljes eszközöket kínál az adaptív és összetett elrendezések létrehozásához, jelentősen leegyszerűsítve azokat a feladatokat, amelyek korábban float, inline-block vagy abszolút pozícionálás használatát igényelték.

.container {
  display: grid; /* Az elemet Grid konténerré alakítja */
  grid-template-columns: 1fr 1fr 1fr; /* Három azonos szélességű oszlop létrehozása */
  grid-template-rows: auto auto; /* Két automatikus magasságú sor létrehozása */
  gap: 10px; /* Térköz hozzáadása a cellák között */
}

.item {
  /* A konténeren belüli elemek automatikusan Grid elemekké válnak */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Az első elem az 1-től 3-ig terjedő oszlopokat foglalja el */
}