Итоги

На этом уроке мы узнали, что:

• CSS Grid раскладывает элементы сразу в строках и столбцах. Элемент с display: grid — это контейнер сетки, а его прямые потомки — элементы сетки.
• Столбцы задаются свойством grid-template-columns: каждое значение создаёт один столбец, например 200px 1fr. Строки создаются автоматически по мере необходимости (или задаются свойством grid-template-rows).
• Единица fr — это одна доля свободного места: 1fr 1fr 1fr создаёт три равных столбца, которые подстраиваются под ширину контейнера.
• repeat(3, 1fr) — более короткая запись для 1fr 1fr 1fr.
• gap задаёт расстояние между строками и столбцами (только между ячейками, но не по краям сетки). Если значений два, первое относится к строкам, а второе — к столбцам; свойства row-gap и column-gap задают их по отдельности.
• Линии сетки нумеруются с 1. Свойства grid-column и grid-row указывают, какие столбцы и строки занимает элемент: span 2 занимает два, 1 / 3 — всё между линиями 1 и 3, а 1 / -1 — все.
• grid-template-areas рисует макет из именованных областей, по одному текстовому значению на каждую строку, а grid-area помещает элемент в область.
• Flexbox предназначен для одного направления (строки или столбца), а grid — для двух (строк и столбцов). Их часто сочетают: grid для макета страницы, flexbox для частей внутри неё.

На следующем уроке вас ждёт итоговый проект: вы самостоятельно оформите целую страницу и используете всё, что узнали на курсе CSS.