Треки та лінії в CSS Grid

Треки та лінії в CSS Grid

CSS Grid складається з декількох основних частин: треків (grid tracks), ліній (grid lines) та комірок (grid cells).

Що таке Grid-трек

Трек у CSS Grid — це область сітки, яка займає один ряд або один стовпець.

• Column track — вертикальний трек (стовпець).
• Row track — горизонтальний трек (ряд).
• Кількість треків залежить від налаштувань Grid-контейнера.

Що таке Grid-комірка

Комірка (grid cell) — це область, яка утворюється на перетині одного стовпця та одного рядка.

Що таке Grid-лінії

Лінії Grid (grid lines) — це невидимі межі, які розташовані між треками та використовуються для позиціонування елементів.

• Вертикальні лінії розділяють стовпці.
• Горизонтальні лінії розділяють рядки.
• Елементи Grid можна прив'язувати до конкретних ліній.

.parent {
  display: grid;

  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
}

Grid складається з треків, які розділяються лініями. На перетині горизонтальних і вертикальних треків утворюються комірки.

• Трек — це ряд або колонка Grid.
• Комірка — область перетину рядка та колонки.
• Лінії знаходяться між треками.
• За допомогою ліній можна точно розміщувати елементи.

.parent {
  display: grid;

  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
}