Когда используется Grid?

CSS Grid: Когда использовать

CSS Grid — это мощная система раскладки для создания двумерных макетов на веб-страницах. Это отличается от Flexbox тем, что Grid работает одновременно с строками и столбцами, обеспечивая более сложное и гибкое позиционирование элементов.

Когда использовать Grid

Grid идеален для следующих сценариев:

• Сложные двумерные макеты — когда нужно контролировать расположение элементов одновременно по горизонтали и вертикали
• Макет страницы (page layout) — создание структуры с header, sidebar, main content, footer
• Таблицы данных — вывод информации в виде таблиц с автоматическим выравниванием колонок
• Галереи и сетки изображений — расположение элементов в виде сетки с равными или неравными размерами
• Адаптивные макеты — создание макетов, которые меняются при изменении размера экрана

Примеры использования Grid

1. Классический макет страницы

// Компонент с Grid разметкой
export function PageLayout() {
  return (
    <div className="grid grid-cols-12 gap-4 min-h-screen">
      {/* Header */}
      <header className="col-span-12 bg-surface-1 p-4 border-b border-border-1">
        Logo & Navigation
      </header>

      {/* Sidebar */}
      <aside className="col-span-2 bg-surface-2 p-4">
        Sidebar Menu
      </aside>

      {/* Main Content */}
      <main className="col-span-10 p-4">
        Main Content
      </main>

      {/* Footer */}
      <footer className="col-span-12 bg-surface-1 p-4 border-t border-border-1">
        Footer
      </footer>
    </div>
  );
}

2. Адаптивная галерея

export function ImageGallery() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {images.map((img) => (
        <div key={img.id} className="aspect-square overflow-hidden rounded-lg">
          <img
            src={img.src}
            alt={img.alt}
            className="w-full h-full object-cover"
          />
        </div>
      ))}
    </div>
  );
}

3. Ассиметричная сетка

export function DashboardGrid() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {/* Большой элемент — 2x2 */}
      <div className="col-span-2 row-span-2 bg-surface-1 rounded-lg p-4">
        Featured Chart
      </div>

      {/* Маленькие элементы */}
      <div className="bg-surface-2 rounded-lg p-4">Card 1</div>
      <div className="bg-surface-2 rounded-lg p-4">Card 2</div>
      <div className="bg-surface-2 rounded-lg p-4">Card 3</div>
      <div className="bg-surface-2 rounded-lg p-4">Card 4</div>
    </div>
  );
}

Grid vs Flexbox

Используй Grid когда:

• Нужна двумерная раскладка (строки И колонки одновременно)
• Требуется сложное позиционирование элементов в макете
• Нужна адаптивность с переносом элементов на новые строки

Используй Flexbox когда:

• Нужна одномерная раскладка (либо строка, либо колонка)
• Элементы должны распределяться по свободному месту
• Нужно выравнивание контента и быстрая адаптация

Template Areas — удобный синтаксис

Grid поддерживает синтаксис template areas, который делает код более читаемым:

export function TemplateLayout() {
  return (
    <div
      className="grid gap-4"
      style={{
        gridTemplateAreas: `
          'header header header'
          'sidebar main main'
          'footer footer footer'
        `,
        gridTemplateColumns: '200px 1fr 1fr',
        gridTemplateRows: 'auto 1fr auto',
      }}
    >
      <header style={{ gridArea: 'header' }}>Header</header>
      <aside style={{ gridArea: 'sidebar' }}>Sidebar</aside>
      <main style={{ gridArea: 'main' }}>Main</main>
      <footer style={{ gridArea: 'footer' }}>Footer</footer>
    </div>
  );
}

Практические советы

• auto-fit vs auto-fill — используй auto-fit для сужения контейнера, auto-fill для сохранения всех треков
• minmax() — комбинируй с repeat() для адаптивных сеток: grid-cols-repeat(auto-fit, minmax(250px, 1fr))
• gap — всегда используй вместо margin для расстояния между элементами
• Tailwind классы — grid-cols-*, gap-*, col-span-* работают без писания кастомного CSS

Grid — это современный стандарт для раскладок, и его использование делает код проще в поддержке и более гибким при адаптации.