Сетка

Невидимые линии, по которым выровнены элементы страницы: колонки, поля, шаг между блоками. Сетка не видна, но именно она делает страницу аккуратной: элементы стоят по одним линиям, а не «примерно рядом». В CSS для сетки есть отдельный display: grid.

Как это выглядит: .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } |— карточка —|— карточка —|— карточка —| ↑ общие левые и правые края

Не путать: Сетка — не рамка и не таблица: линии не рисуются, они только задают положение. И это не то же самое, что flex: flex раскладывает элементы в ряд или колонку, grid задаёт сразу строки и столбцы. Не путать и с «сеткой координат» в играх — там другое.

Откуда слово: Уменьшительное от «сеть»: сетка — маленькая сеть. Слово пришло из праславянского, где значило приспособление для ловли. В типографику его перенесли буквально: страница расчерчена, как рыболовная сеть, и текст кладут в её ячейки. Отсюда и «модульная сетка» — та же рыболовная, только с модулями.

Где это проходят: урок 3.2 «Ряд и сетка: несколько карточек в строку» · Интерфейсы и сайты с нуля

Весь словарь программиста — 135 слов с объяснениями, примерами и ссылками на уроки.