[Перевод] Понимание CSS Grid: Создание Grid-контейнера

Перевод «Understanding CSS Grid: Creating A Grid Container» Рейчел Эндрю

Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.

В данной начальной статье будет рассказано о том, что происходит, когда вы создаёте grid-контейнер и о различных свойствах, которые можно применять к родительскому элементу для управления сеткой. Вы узнаете, что в некоторых ситуациях достаточно только свойств, применяемых к grid-контейнеру.

В этой статье мы рассмотрим:

Создание grid-контейнера с помощью display: grid или display: inline-grid

Создание колонок и строк с помощью grid-template-columns и grid-template-rows

Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows

Читать дальше →

Источник:

Уроки CSS на Хабрахабре