Опорная идея
CSS Grid создаёт двумерные сетки — строки и колонки одновременно. Удобно для галерей и сложных макетов.
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); /* три равные колонки */ gap: 12px; }
• grid-template-columns задаёт колонки; 1fr — «одна доля» свободного места, repeat(3, 1fr) — три равные колонки. • gap — промежутки между ячейками.
Когда что выбирать: Flexbox — для ряда или столбца элементов (одно измерение), Grid — для сеток с строками и колонками (два измерения). На практике их часто комбинируют.