Заключение

Шпаргалка по CSS Grid

Свойства контейнера:

.container {
  display: grid;
  
  /* Определение сетки */
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header" "sidebar main";
  
  /* Отступы */
  gap: 20px;
  row-gap: 10px;
  column-gap: 20px;
  
  /* Выравнивание элементов */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  
  /* Выравнивание сетки */
  justify-content: start | end | center | space-between;
  align-content: start | end | center | space-between;
}

Свойства элементов:

.item {
  /* Позиционирование */
  grid-column: 1 / 3;      /* от линии 1 до 3 */
  grid-column: span 2;     /* занять 2 колонки */
  grid-row: 1 / -1;        /* от первой до последней */
  grid-area: header;       /* именованная область */
  
  /* Индивидуальное выравнивание */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Полезные паттерны:

/* Адаптивная сетка без медиа-запросов */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

/* Центрирование одного элемента */
display: grid;
place-items: center;

/* Классический layout */
grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

Grid + Flexbox

Используйте вместе:

• Grid — для общей структуры страницы
• Flexbox — для выравнивания внутри компонентов

Полезные ресурсы

• CSS-Tricks: Complete Guide to Grid
• Grid Garden — игра для изучения
• Grid by Example — примеры макетов

Поздравляем! Теперь вы владеете двумя мощнейшими инструментами CSS-вёрстки!