CSS. Grid. Grid-template-rows

🧱 Суть

grid-template-rows: auto 1fr auto – это паттерн Grid для создания структуры:

верх → контент → низ

В Tailwind:

<div className="grid grid-rows-[auto_1fr_auto]">

Эквивалент CSS:

grid-template-rows: auto 1fr auto;

📦 Проблема

При создании страниц часто нужно:

верхний блок оставить по размеру контента
центральный блок растянуть
нижний блок оставить по размеру контента

Например:

Header
Content
Footer

Обычные размеры не решают эту задачу.

✅ Решение

Использовать:

grid-template-rows: auto 1fr auto;

💻 Код

<div className="grid grid-rows-[auto_1fr_auto] h-screen">
  <header>
    Header
  </header>
 
  <main>
    Content
  </main>
 
  <footer>
    Footer
  </footer>
</div>

Как работает

Первая строка:

auto

Высота по содержимому.

Вторая строка:

1fr

Занимает всё оставшееся пространство.

Аналогия:

flex-grow: 1;

Третья строка:

auto

Снова размер по контенту.

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

Подходит для:

┌──────────────┐
│ Search       │ ← auto
├──────────────┤
│              │
│ Content      │ ← 1fr
│              │
├──────────────┤
│ Button       │ ← auto
└──────────────┘

🎯 Вывод

auto = размер по содержимому
1fr = всё свободное место
auto 1fr auto = классический layout страницы
часто используется для экранов h-screen

LETUNOFF DOCS

Навигация