Строка сетки

Сетка складывается из пересечения строк и столбцов. Колонки разработчики обычно планируют заранее: сколько карточек в ряд, какая ширина у сайдбара. Строки же часто создаются сами — по мере того, как элементы заполняют сетку. Понимание того, откуда они берутся и какой высоты будут, избавляет от «прыгающих» карточек разной высоты и пустых мест.

Строки в CSS Grid

• Явные задаются свойством grid-template-rows: например, шапка, содержимое и подвал.
• Неявные браузер добавляет сам, когда элементов больше, чем ячеек в явных строках. Их высоту задаёт grid-auto-rows.
• Размещение. Элемент можно растянуть на несколько строк: grid-row: span 2, или поставить между линиями: grid-row: 1 / 3. Линии сетки нумеруются с единицы, отрицательные номера считаются с конца.

Пример раскладки

.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* шапка, контент, подвал */
  min-height: 100vh;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 16px;
}
.gallery .featured { grid-row: span 2; grid-column: span 2; }

Первая сетка прижимает подвал к низу окна даже на короткой странице. Во второй каждая неявная строка будет не ниже 160 пикселей, а главное фото займёт квадрат из четырёх ячеек.

Строка в таблице и во фреймворке

В HTML-таблице строка — элемент tr, и в отличие от столбца это настоящий контейнер для ячеек. Высота строки определяется самой высокой ячейкой.

В CSS-фреймворках слово «row» означает служебную обёртку. В Bootstrap класс .row оборачивает колонки .col-* и компенсирует их отступы отрицательными полями. Частая ошибка при доработке шаблонов на Bootstrap — поставить .col без .row или вложить .row прямо в .row: появляется лишняя горизонтальная прокрутка или съезжают края. В собственных проектах те же задачи проще решить нативной сеткой, подробнее — в статье про CSS Grid.