0+ Материал без явных возрастных ограничений

Видео: «CSS Grid»

Загрузка...

CSS Grid – новейший стандарт построения верстки сайта. С этими видео уроками, Вы легко сможете овладеть им.

Видео уроки по CSS display: grid на русском языке, позволят Вам в совершенстве узнать все тонкости создания сетки сайта на CSS Grid. Автор видео доступным и понятным языком объясняет эти, как кажется на первый взгляд, сложные вещи. После окончания этого часового курса, Вы сможете полноценно использовать CSS Grid сетку для своих сайтов и создавать сайты под заказ.

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

Преимущества CSS Grid заключается в том, что данное свойство было дополнено различными вспомогательными свойствами, которые придали ему значительных возможностей. Если Вы до сих пор использовали только

display: inline-block

или

display: flex

, то теперь сможете использовать

.grid {display: grid;
grid-gap: 10px;
grid-template-rows: auto 1fr auto;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));/*ИЛИ*/
grid-template-columns: repeat(auto-fill, minmax(100px, auto));/*ИЛИ*/
grid-template-areas: 'header header header' 'aside main aside1' 'footer footer footer';
}
header{grid-area:header}

С данным свойством сделать адаптивную верстку теперь намного легче. Используйте лишь media запросы, и перестраивайте grid-template-areas:

@media (max-width:510px){
aside{display:none}
.grid{
grid-template-areas: 'header header' 'main aside1' 'footer footer';
}
}

Просто попробуйте, и Вы поймете насколько display: grid легче, быстрее, удобнее, чем все ранее придуманные способы организации верстки на сайте.

Категория:
Компьютер
Поделитесь в социльных сетях:

Информация:

Создан:
Просмотров:
186
Сайт:
Перейти
Длительность:
00:58:13
Размер:
31 MB

Файл видео:

Загрузка...

Случайный материал: Еще

Последние 9 материалов:

Добавить комментарий
Комментариев пока нет
Загрузка...