Колонки и промежутки

Сетка задаёт линии, по которым размещаются элементы. Три карточки образуют один ряд, а промежутки отделяют их друг от друга. Размер рабочей области влияет на ширину каждой карточки, поэтому изменение окна может потребовать другого числа колонок.

Сначала определим доступную ширину. Затем выберем промежутки и распределим оставшееся место между колонками. В этом порядке легко объяснить каждое число и заметить, почему слишком длинный заголовок стал переноситься.

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

Этот код является учебным фрагментом для макета страницы урока. Он не запускался и не является полной реализацией портала.
