[Перевод] Понимание CSS Grid (2 часть): Grid-линии

Перевод Understanding CSS Grid: Grid Lines» Rachel Andrew

Понимание CSS Grid (2 часть): Grid-линии

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

Мы охватим следующие моменты:

Свойства размещения элементов grid-column-start, grid-column-end, grid-row-start, grid-row-end и их краткие формы записи grid-column and grid-row

Как использовать grid-area для размещения элементов по номерам grid-линий

Как располагать элементы с помощью именованных линий

Отличие в размещении элементов в явной и неявной сетке

Использование ключевого слова span с небольшим бонусом subgrid

Чего следует остерегаться при одновременном использовании ручного и автоматического размещения элементов

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

Источник: Уроки CSS на Хабрахабре

Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.