В каких направлениях одновременно может работать Grid

В каких направлениях одновременно может работать Grid?

Краткий ответ

CSS Grid работает в двух направлениях одновременно:

• Горизонтальное - контроль колонок (grid-template-columns)
• Вертикальное - контроль строк (grid-template-rows)

Это главное отличие Grid от Flexbox, который работает в одном направлении.

Основы CSS Grid

1. Двумерная разметка

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 3 колонки */
  grid-template-rows: 60px 1fr 60px; /* 3 строки */
  gap: 10px;
  min-height: 100vh;
}

Эта сетка имеет:

• 3 колонки - заданы явно
• 3 строки - заданы явно
• 9 ячеек - пересечение колонок и строк

<div class="grid-container">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Content</main>
  <footer>Footer</footer>
</div>

Визуально:

┌────────┬──────────────┬────────┐
│       Header (grid-column: 1/4)      │
├────────┼──────────────┼────────┤
│ Nav    │              │        │
│(1/1)   │   Main       │        │
│        │  (2/2)       │        │
├────────┼──────────────┼────────┤
│     Footer (grid-column: 1/4)   │
└────────┴──────────────┴────────┘

2. Определение колонок (горизонтальное направление)

.grid {
  display: grid;
  
  /* Явное определение */
  grid-template-columns: 100px 200px 300px;
  
  /* С единицами fr (fraction) */
  grid-template-columns: 1fr 2fr 1fr; /* Соотношение 1:2:1 */
  
  /* Автоматические колонки */
  grid-template-columns: repeat(3, 1fr); /* 3 равные колонки */
  
  /* Адаптивные колонки */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

3. Определение строк (вертикальное направление)

.grid {
  display: grid;
  
  /* Явное определение */
  grid-template-rows: 60px auto 60px; /* Header, main, footer */
  
  /* С равными строками */
  grid-template-rows: repeat(3, 200px);
  
  /* Минимальная высота */
  grid-template-rows: repeat(auto-fill, minmax(100px, auto));
}

4. Расположение элемента в двух направлениях

Каждый элемент может занимать несколько колонок и строк:

.header {
  grid-column: 1 / -1; /* От колонки 1 до конца (все колонки) */
  grid-row: 1; /* Строка 1 */
}

.sidebar {
  grid-column: 1; /* Колонка 1 */
  grid-row: 2 / 4; /* От строки 2 до 4 (2 строки) */
}

.main {
  grid-column: 2 / -1; /* От колонки 2 до конца */
  grid-row: 2; /* Строка 2 */
}

.footer {
  grid-column: 1 / -1; /* Все колонки */
  grid-row: 4; /* Строка 4 */
}

Альтернативный синтаксис:

.header {
  grid-column-start: 1;
  grid-column-end: 4; /* или использовать span */
  grid-row-start: 1;
  grid-row-end: 2;
}

/* То же самое, но короче */
.header {
  grid-column: 1 / span 3; /* Занять 3 колонки */
  grid-row: 1 / span 1;
}

Практические примеры

Пример 1: Классический layout (2D контроль)

<div class="page-layout">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

<style>
  .page-layout {
    display: grid;
    grid-template-columns: 250px 1fr 200px; /* Левый sidebar, main, правый sidebar */
    grid-template-rows: auto 1fr auto; /* Header, main, footer */
    gap: 20px;
    min-height: 100vh;
  }
  
  header {
    grid-column: 1 / -1; /* Полная ширина */
    background: #333;
    color: white;
    padding: 20px;
  }
  
  nav {
    grid-row: 2;
    grid-column: 1;
    background: #f0f0f0;
  }
  
  main {
    grid-row: 2;
    grid-column: 2;
  }
  
  aside {
    grid-row: 2;
    grid-column: 3;
    background: #f9f9f9;
  }
  
  footer {
    grid-column: 1 / -1; /* Полная ширина */
    background: #333;
    color: white;
  }
</style>

Пример 2: Адаптивная галерея

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item:nth-child(1) {
  grid-column: span 2; /* Занять 2 колонки */
  grid-row: span 2; /* Занять 2 строки */
}

.gallery-item:nth-child(4) {
  grid-column: span 2; /* Красивый асимметричный layout */
}

Результат:

┌──────────────────┬───────────┬───────────┐
│                  │     2     │     3     │
│        1         ├───────────┼───────────┤
│                  │     5     │     6     │
├──────────────────┼───────────┼───────────┤
│      4 (span 2)  │     7     │     8     │
└──────────────────┴───────────┴───────────┘

Пример 3: Разместить элемент в центр двумерного контейнера

.modal-backdrop {
  display: grid;
  place-items: center; /* Центрирует по двум осям одновременно */
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  width: 500px;
  background: white;
  padding: 40px;
  border-radius: 8px;
}

/* Эквивалент */
.modal-backdrop {
  display: grid;
  justify-items: center; /* Горизонтальное выравнивание */
  align-items: center; /* Вертикальное выравнивание */
}

Пример 4: Named Grid Areas

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header header header"
    "sidebar main sidebar"
    "footer footer footer";
  gap: 10px;
}

header {
  grid-area: header;
}

nav {
  grid-area: sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

Это более читаемый способ определения макета!

Вложенные Grid

Grid внутри Grid может создавать сложные макеты:

.outer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.grid-item {
  display: grid; /* Вложенный grid */
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

Автоматическое расширение Grid

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

/* На узком экране: 1 колонка */
/* На среднем: 2-3 колонки */
/* На широком: 4+ колонки */

Разница между auto-fit и auto-fill

/* auto-fit: сворачивает пустые треки */
.container-fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* Если 3 item в контейнере шириной 500px:
   - 5 колонок минимум, но 2 будут пустыми
   - auto-fit сворачивает их
   - результат: 3 широких колонки */

/* auto-fill: оставляет пустые треки */
.container-fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
/* Результат: 5 колонок (3 с контентом + 2 пустых) */

Grid vs Flexbox для 2D

Заключение

CSS Grid работает в двух направлениях одновременно:

1. Горизонтальное (колонки) - grid-template-columns
2. Вертикальное (строки) - grid-template-rows

Это позволяет создавать сложные двумерные макеты, где каждый элемент может явно контролироваться и по колонкам, и по строкам.

Современный подход в разработке:

• Используй Grid для основного макета страницы
• Используй Flexbox для выравнивания внутри элементов
• Вложенные Grid и Flexbox можно комбинировать для максимальной гибкости