CSS Grid верстка, часть 5. Выравнивание

Подписаться 47 тыс.

Просмотров 4,7 тыс.

50% 1

Подобно технологии FlexBox в гридах есть возможность выравнивать содержимое по горизонтали и вертикали, используя как привычные свойства justify-content и align-items, так и другие. Они ведут себя несколько иначе, так что разбираемся.
В уроке рассмотрены такие свойства для grid-контейнера, как justify-items, align-items, place-items, justify-content, align-content, place-content. Плюс свойства для элементов грида - align-self, justify-self и place-self.
Мои курсы по вебу с купонами:
✅ mishanep.com/

Опубликовано:

17 май 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 11

@user-zo6rp1xn8i 21 день назад

Спасибо! Очень хорошо объясняете!😊😊😊

@user-vm2db5cq1g Год назад

Самое подробные уроки по гридам, что я видел, спасибо Михаил!

@RewCSharp 4 месяца назад

Спасибо за урок!

@nikitamaliarchuk2481 2 года назад

Спасибо 👍

@user-qc1cn4dl8q Год назад

Спасибо Михаил, очень полезное видео!

@user-wq9oy7hx6z 2 года назад

Спасибо, весьма полезно!

@vladimirkusakin Год назад

Спасибо за крутой курс! 👍🏻👍🏻👍🏻

@Mstiyar Год назад

Скажите, а как выравнивать содержимое внутри каждого блока? Собственно у вас вот записана в каждом блоке текстовая информация, flex легко позволяет ее выровнять по центру и по вертикале и по горизонтале.Как это сделать с помощью grid?

@mishanep Год назад

На уровне самих элементов доступны свойства align-self и justify-self для выравнивания. Либо plase-self как их комбинация. Для управления с уровня грида - justify-items и align-items. В видео ничего этого нет?

@Mstiyar Год назад

@@mishanep Есть, но как я понял это относится к позиционированию блока. Я же говорю про внутреннее содержимое блока. Вот есть див, в нем записан текст. Текст прижимается по умолчанию к верхнему левому углу. Во флексах можно двумя командами заставить его расположиться как нужно и по горизонтале и по вертикале. Тоже самое что vertical-align и text-align. Вы говорите что в grid vertical-align не работает и это так, но как же его тогда выравнивать? Оборачивать текст в грид?

@mishanep Год назад

Так и текст у вас будет находиться внутри блока. Даже если это span, то восприниматься он будет внутри грида как блочный элемент. Т.е. грид своими настройками влияет непосредственно на "детей". А что внутри них происходит это уже забота самих чилдренов. Если вам не требуется, чтобы дочерний блок сжимался по ширине и высоте до своего контента, но при этом хотите управлять положением вложенного контента, то сделайте вложенный блок флексом.