CSS Grid с нуля: понятное руководство по двумерным сеткам для новичков
Чтобы быстрее усвоить материал и «пощупать» работу свойств в реальном времени, воспользуйтесь интерактивным инструментом: конструктор блоков. Если вы верстаете сайты, то наверняка сталкивались с ситуацией, когда нужно расположить элементы ровной сеткой: карточки товаров, галерею фото или сложную структуру страницы с шапкой, боковой колонкой и футером. Раньше для этого использовали плавающие блоки (float), таблицы или inline-block. Позже появился Flexbox, который сильно упростил жизнь, но он создавался в первую очередь для одномерных макетов (когда элементы выстраиваются в одну линию — строку или столбец)...