
[Перевод] Понимание CSS Grid (2 часть): Grid-линии
Перевод Understanding CSS Grid: Grid Lines» Rachel Andrew
В первой статье из серии "Понимание 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
Чего следует остерегаться при одновременном использовании ручного и автоматического размещения элементов
Читать дальше →
Источник:
0 Комментарии