Как работает CSS Grid?

Grid — это двумерная система раскладки. На контейнере ставишь display: grid и задаёшь колонки/строки: grid-template-columns: 1fr 2fr 1fr. fr — гибкая единица, распределяет свободное место. gap задаёт отступы между ячейками. Элементы можно размещать через grid-column/grid-row или grid-area. repeat(3, 1fr) — три равные колонки. minmax(200px, 1fr) — адаптивность без медиа-запросов. Grid заменяет float-раскладки и сложные flex-конструкции для макетов страниц.