autoRSS

[Перевод] Понимание 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

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

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