Какво е CSS Grid?

CSS Grid Layout (или просто CSS Grid) — това е двумерна система за оформление в CSS. Тя позволява управлението на разположението на елементите както по редове (хоризонтално), така и по колони (вертикално), създавайки сложни мрежести структури за изграждане на интерфейси.

Основните концепции на CSS Grid включват:

Grid Container: Елемент, към който се прилага свойството display: grid или display: inline-grid. Потомците на този елемент стават Grid Items.
Grid Items: Пряките наследници на Grid Container.
Grid Lines: Разделителните линии, образуващи мрежата. Могат да бъдат именувани или да имат числов индекс.
Grid Tracks: Пространството между две линии на мрежата — това е или колона, или ред.
Grid Cells: Най-малката единица на мрежата, образувана от пресечението на ред и колона.
Grid Areas: Правоъгълна област на мрежата, заемаща една или няколко клетки.

Ключови свойства за работа с CSS Grid включват:

За контейнера:

display: grid | inline-grid;
grid-template-columns: Определя колоните на мрежата.
grid-template-rows: Определя редовете на мрежата.
grid-template-areas: Определя именованите области на мрежата.
gap | row-gap | column-gap: Определя разстоянията между клетките.
justify-items | align-items | place-items: Подравняване на съдържанието вътре в клетките по главната и поперечната ос.
justify-content | align-content | place-content: Подравняване на редовете на мрежата вътре в контейнера.

За елементите (Grid Items):

grid-column-start | grid-column-end | grid-column: Определя кои линии на колони заема елементът.
grid-row-start | grid-row-end | grid-row: Определя кои линии на редове заема елементът.
grid-area: Назначава на елемента именована област на мрежата или определя неговото положение чрез линии.
justify-self | align-self | place-self: Подравняване на самия елемент вътре в неговата клетка.

CSS Grid предоставя мощни средства за създаване на адаптивни и сложни оформления, значително улеснявайки задачите, които по-рано изискваха използването на float, inline-block или абсолютното позициониране.

.container {
  display: grid; /* Правим елемента Grid контейнер */
  grid-template-columns: 1fr 1fr 1fr; /* Създаваме 3 колони с еднаква ширина */
  grid-template-rows: auto auto; /* Създаваме 2 реда с автоматична височина */
  gap: 10px; /* Добавяме разстояния между клетките */
}

.item {
  /* Елементите вътре в контейнера автоматично стават Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Първият елемент заема колони от 1 до 3 */
}