me_edu
Основы веб-разработки: HTML и CSSШаг 20 из 26 · 0% пройдено
Блочная модель и раскладка · Box model, Flexbox, Grid

Grid: сетки

CSS Grid создаёт двумерные сетки — строки и колонки одновременно. Удобно для галерей и сложных макетов.

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); /* три равные колонки */ gap: 12px; }

• grid-template-columns задаёт колонки; 1fr — «одна доля» свободного места, repeat(3, 1fr) — три равные колонки. • gap — промежутки между ячейками.

Когда что выбирать: Flexbox — для ряда или столбца элементов (одно измерение), Grid — для сеток с строками и колонками (два измерения). На практике их часто комбинируют.

Назад

Обсуждение

Войдите, чтобы участвовать в обсуждении.

Пока нет сообщений.