Загрузка страницы

CSS Grid Layout. Свойства определения сетки grid-template и другие

Продолжаем изучать Grid Layout и сегодня поговорим о свойствах определения сетки, а именно о grid-template-rows, grid-template-columns, grid-template. А так же grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow.

👉Весь прейлист CSS Grid Layout: - https://www.youtube.com/playlist?list=PLM6XATa8CAG5pXQrW_kDaeZb_uIAMNZIm

🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle

Содержание:
00:00 - Введение
00:16 - Свойства grid-template-rows и grid-template-columns
03:52 - Единица гибкости fr
07:00 - Применение minmax
09:13 - Контентная ширина, fit-content
11:38 - Применение repeat
12:49 - Свойство grid-template-areas
16:19 - Свойство grid-template
19:13 - Неявная сетка. grid-auto-rows, grid-auto-columns
20:58 - Свойство grid-auto-flow
22:18 - Напутствие

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle

🤟 Живи, а работай в свободное время! ©

Видео CSS Grid Layout. Свойства определения сетки grid-template и другие канала Фрилансер по жизни - IT и фриланс
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
20 июля 2020 г. 17:17:09
00:22:41
Другие видео канала
Адаптивная верстка интернет-магазина с нуля. Часть #2. GULP SCSS JSАдаптивная верстка интернет-магазина с нуля. Часть #2. GULP SCSS JSCSS transform. 2D и 3D трансформации translate, scale, rotate и другиеCSS transform. 2D и 3D трансформации translate, scale, rotate и другиеИстория Паши. Советы Senior Full Stack Developer. Собеседования, путешествия, JavaScript фреймворки.История Паши. Советы Senior Full Stack Developer. Собеседования, путешествия, JavaScript фреймворки.Хватит врать про Grid Layout, Сергей ПоповХватит врать про Grid Layout, Сергей ПоповМодальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтовGulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтовАдаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.Свойства и стили оформления блоков. CSS opacity. Уроки HTML CSS JS. Урок №8Свойства и стили оформления блоков. CSS opacity. Уроки HTML CSS JS. Урок №8Можно вообще всё. Раскладка по гридуМожно вообще всё. Раскладка по гридуCSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11Свойства блоков. CSS padding. CSS margin. CSS display. Уроки CSS HTML JS. Урок №7Свойства блоков. CSS padding. CSS margin. CSS display. Уроки CSS HTML JS. Урок №7FLEXBOX. Учимся верстать на флексах. Флексбокс уроки. Часть третья - свойство flex-directionFLEXBOX. Учимся верстать на флексах. Флексбокс уроки. Часть третья - свойство flex-directionCSS Grid Layout. Кроссбраузерность. Grid и Flex. Основные понятия.CSS Grid Layout. Кроссбраузерность. Grid и Flex. Основные понятия.Виды сайтов за 14 минут. Какие бывают сайты, типы сайтов.Виды сайтов за 14 минут. Какие бывают сайты, типы сайтов.Отзывчивый выход объекта за пределы сетки CSS HTML. Интересный случай с контейнером.Отзывчивый выход объекта за пределы сетки CSS HTML. Интересный случай с контейнером.Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксинАдаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксинBootstrap vs Grid CSS: что выбрать в 2019 году?Bootstrap vs Grid CSS: что выбрать в 2019 году?CSS animation и @keyframes за 12 минут. Подробный разбор CSS свойств анимации + шпаргалка.CSS animation и @keyframes за 12 минут. Подробный разбор CSS свойств анимации + шпаргалка.Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.Динамический адаптив // Быстрая адаптация сложных объектов на JavaScriptДинамический адаптив // Быстрая адаптация сложных объектов на JavaScript
Яндекс.Метрика