Установка высоты рядов в CSS Grid: Аналог flex-grow: 1

Быстрый ответ

Для установки определённой высоты строк в CSS Grid воспользуйтесь свойством grid-template-rows, выбирая соответствующие единицы измерения, такие как px, %, vh или fr для динамичной адаптации. Вот пример с фиксированной высотой строк:

.grid-container {
  display: grid;
  grid-template-rows: 50px 100px; // Высота каждой строки уникальна.
}

Если вы хотите, чтобы строки имели одинаковую и гибкую высоту, распределяя доступное пространство, используйте единицу fr:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr; // Равное распределение пространства между строками.
}

Единица 1fr означает одну долю от доступного пространства, позволяя эластично регулировать высоту строк.

Продвинутые методы управления высотой строк

Тонкая настройка высоты строк

Для точной настройки высоты строк используйте единицу px:

grid-template-rows: 100px 250px; /* Пиксели предоставляют точный контроль над размерами. */

Если важна пропорциональность, применяйте единицы %:

grid-template-rows: 25% 75%; /* Распределение пространства на 75% и 25%. */

Подробнее об этом расскажет наш спикер на видео

Адаптивные строки с использованием calc() и min-height

Сочетайте различные единицы измерения с помощью функции calc(), чтобы строки могли адаптироваться к изменениям размера экрана:

grid-template-rows: calc(50vh – 20px) auto; /* Динамика и адаптивность нашего расположения */

Применяйте свойство min-height, чтобы не допустить исчезновения пустых строк:

.grid-item {
  min-height: 100px; /* Наша минимальная высота */
}

Размеры колонок и зазоры между элементами

Свойство grid-gap поможет создать приятный визуальный эффект распределения строк и колонок:

.grid-container {
  grid-gap: 20px; /* Наш промежуток между элементами */
}

Чтобы создать упорядоченную композицию, задайте размеры колонок наряду со строками:

.grid-container {
  grid-template-columns: 1fr 2fr 1fr; /* Мы также управляем размерами колонок */
}

Визуализация

Настройка высоты строк в CSS Grid можно представить аналогией с книгами на полке:

| Ячейка Grid (полка) | Высота элемента Grid (книга) | Занимаемое место |
| ------------------- | ---------------------------- | ---------------- |
| 1                   | Небольшой роман (1fr)        | 📘📗📙              |
| 2                   | Роман (2fr)                  | 📘📗📙📘📗📙          |
| 3                   | Энциклопедия (3fr)           | 📘📗📙📘📗📙📘📗📙      |

Регулирование высоты книг схоже с работой свойства grid-template-rows.

grid-template-rows: 1fr 2fr 3fr; /* Так мы размещаем наши "книги" */

Высоте строк выделяется пространство на "полке", пропорциональное их "высоте".

Продвинутые настройки макета

Использование пользовательских свойств для настройки строк

Для создания консистентного дизайна применяйте CSS переменные:

:root {
  --row-height: 150px; /* Определили нашу переменную */
}

.grid-container {
  grid-template-rows: var(--row-height) auto; /* Применяем её в коде */
}

Индивидуальная стилизация элементов

Для индивидуальной стилизации определённого элемента используйте псевдо-класс :nth-child:

.grid-container > div:nth-child(2) {
  align-self: start; /* Второму элементу нужно индивидуальное позиционирование */
}

Преимущества функции repeat()

Упрощайте дублирование строк с помощью функции repeat():

grid-template-rows: repeat(3, 1fr); /* Одна строка, две строки, три строки... */

Совместимость с разными платформами

При разработке приложений на Electron имейте в виду, что возможности CSS могут варьироваться в зависимости от версии Chrome в Electron.

Полезные материалы

1. CSS Grid Layout – CSS: каскадные таблицы стилей | MDN — подробное изучение высоты строк в CSS Grid.
2. Полное руководство по CSS Grid | CSS-Tricks — незаменимое руководство со всеми деталями работы с сетками CSS Grid.
3. CSS Grid Layout – W3Schools — краткое и ясное изложение основных принципов настройки строк и колонок в гридах.
4. Определение областей Grid – Grid by Example — экспертные заметки от Рэйчел Эндрю о задании размеров элементов сетки.
5. Использование CSS Grid: поддержка браузеров без Grid — Smashing Magazine — ценные рекомендации по созданию альтернативных решений для браузеров без поддержки grid.
6. Учим CSS Grid – Руководство по изучению CSS Grid | Jonathan Suh — обзор автоматического регулирования размеров в CSS Grid.
7. CSS Grid Tutorial – Учите CSS Grid бесплатно | Scrimba — интерактивное руководство для глубокого и практичного изучения CSS Grid.