CSS Grid Layout. Свойства определения сетки grid-template и другие
HTML-код
- Опубликовано: 28 июн 2024
- Продолжаем изучать 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: - • CSS Grid Layout
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / 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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤟 Весь плейлист CSS Grid Layout ruclips.net/video/GV92IdMGFfA/видео.html
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
лучший канал по верстке , что я знаю. Некоторые видео пересматривал раза по 3-4 когда надо освежить в памяти. Кратко понятно и доходчиво!
Спасибо!
Да, я тоже самое делаю ))
Могу десяток названий других каналов перечислить, даже лучше )
@@nikolaydd6219если не сложно, давай)
@@nikolaydd6219 а чё притих?)
Евгений, спасибо за труд и что делитесь с нами своими знаниями🙏
Пожалуйста!
Какой же классный урок! Спасибо Женя!!!
Смотрю уроки про grid CSS на большом экране телека, изображение чёткое, разрешение соответствует... Качество изображение стало лучше, спасибо за твои уроки и твой труд!
Пожалуйста!
Вы делайте меня счастливым , у вас талант объяснения , спасибо вам большое за ваши старания .
Спасибо, Женя! Огонь!
пожалуйста!
Как всегда отличная подача материала)
Благодарю за ваш труд!
Пожалуйста!
Спасибо за такие качественные уроки!
Это просто пушка! Спасибо!)
Большое спасибо за ваши уроки
Відео супер, дякую!!!
Гениально! спасибо!
Большое спасибо за полезный урок!
Спасибо все чётко и понятно!!!
Я рад!
Спасибо, смотрим дальше)
Спасибо за помощь!
Евгений, МЕГА круто!!!! Спасибо!!!!
Пожалуйста!
Так много интересного , спасибо)
Спасибо, Жека! Учусь по твоим урокам)
Пожалуйста!
Учусь уже месяц, Женя , твоя фоновая музыка у меня практически постоянно в голове))))Спасибо тебе за уроки, но кукуха реально едет от инфы и музыки)
Спасибо большое, очень крутые гриды, особенно в сочитании с флексами !
Пожалуйста!
Спасибо, Жека!!!
Знаком с grid, но после этого видео узнал новые свойства, grid контейнера, Круто!👍
Дякую Жека. Крутий контент
Комментарий в поддержку видео/канала. Хорошая подача, годный контент 👍
Спасибо большое! Видео помогло решить мою задачу)
Все подробно доступно
Спасибо! Очень крутая штука!
Красавчик! Все подробно доступно.
Я рад!
Большое спасибо за этот урок! Я вас в прошлых критиковал, всё никак не доходило до конца, а тут полностью дошло. Долго пытался разобраться с гридами и всё не получалось. Ради интереса переделал ваш двухколоночный макет в трехколоночный плюс футер, и всё это оказалось легко и просто. Использование grid-template даже проще в понимании логики процесса за grid-template-rows + grid-template-columns + grid-template-areas, хотя бы тем, что строки ты прописываешь каждую на отдельной строке, прям как эти строки будут отображаться в макете, а не в ряд как в grid-template-rows, а колонки в одну строку, что тоже удобно, так как создается виртуальное представление колонок.
Спасибо! Очень нужный материал ! Ты лучший
Спасибо! Я рад
Отличное видео. Всё понятно. Теперь знаю как управлять грибами припостроении интерфейса.
благодарю за качественный контент, которые вы нам предоставили сенсай :)
Дякую! Все зрозуміло.
Спасибо большое за полезный урок!
Пожалуйста!
Жека, видео позновательное, спасибо тебе за твои уроки
Пожалуйста!
Блин, это просто супер!! Большое спасибо!
Пожалуйста!
Как всегда топ 😊
Спасибо!
Огромное спасибо!
Огромное спасибо, ты лучший)
Пожалуйста!
Спасибо за всё)))
Хорошо, отлично, замечательно :)
Спасибо!
Спасибо! 👍✨
Спасибо, Сенсей!
Жека, благодарю!! Очередная годнота.
Пожалуйста!
Я начинала с ваших уроков свои попытки войти в айти) Я продолжаю учиться, но вы как были одним из лучших, так и остаетесь. Вам давно пора школу открывать! У меня к вам большая просьба с точки зрения новичка, который по крупицам собирает в резюме все что угодно, чтобы продемонстрировать "Я читал, слушал, вот там и тут". Т.е. просьба называть курсы на Ютубе таким образом, чтобы их можно было указывать в резюме. К примеру, курсы на Юдеми или Орейли - это тот же Ютуб по сути, но на другой площадке.
Ваш уровень преподавания гораздо выше, чем у большинства людей, которые берут за это деньги! Качество контента, да и все вообще на высоте. Вы делаете огромную работу. Просьба только как-то это все оформить, чтобы на вас можно было ссылаться. Оно возможно и вам полезно будет с точки зрения, чтобы вас упоминали чаще. Большое спасибо!
Пожалуйста!
Большое спасибо!)
Великолепно!
Спасибо!
спасибо вам большое
Женя ты супер! Классно мотивируешь! Хочу изучить Grid по твоему плейлисту!
Спасибо!
@@FreelancerLifeStyle Спасибо за плейлист и канал в целом. Очень полезно и понятно. И красиво.
Удивляюсь, как сложный материал легко заходит при правильной подаче!) Спасибо!!!
самые лучшие и главное понятные объяснения о верстке, без вас я бы еще дольше по времени разбирался. Евгений вы лучший, такое чувство что за работу взялся самый настоящий перфекционист, который понимает что надо для новичка.
но у меня еще предложение: как вам идея сделать разбор об инспекторе браузеров? об их фишках и полезностях.
так же хотелось бы чтобы еще были макеты для фигмы, поскольку лайфхак с аккаунтами для авакода не работает, по-крайней мере у меня((
но в любом случае, мое тебе почтение и уважение евгений
Класcная штучка этот Grid Layout! И, да, красивые фотки у фонтана!
Клас! Спасибо!!)
Пожалуйста!
Шикарно! Прошел на FreeCodeCamp сейчас блок на эту тему и не особо понял. А тут посмотрел, и как будто бы понял). Спасибо большущее!
Спасибо огромное, как всегда топ!
Пожалуйста!
Спасибо!
Пишу немного backend на фреймворках. Решил вот сделать свою верстку чтобы применить как шаблон темы и по ходу я застрял на Вашем канале!:))) Очень впечатляет! Спасибо за Ваш труд. Однозначно лайк!
Просто получаю интеллектуальное наслаждение))
Я рад!
спасибо за видео, оч помог!
Спасибо
Пожалуйста!
отличный урок!
Вы супер)
красавчик, продолжай в том же духе!
Продолжаю!
Просто оставлю лайк и коммент, для поддержки, так сказать :)
Как всегда 👍👍👍
ты супер, чел!
"Но и это еще не все!" :)
Лучший!
На протяжении всего видео думал что это все! НО НЕТ!!!)))
Хех)
Сразу лайк :))
Спасибо!
Дякую!)
Ураа! Спасибо, вы лучший!
Пожалуйста!
Отличный канал, отличное и информативное видео. При просмотре 20-ти минутного видео становится немного скучно, но всё отлично! Удачи в развитии канала!!
Это реально удобней флексов
вы как всегда прекрасны! Прям солнышко, сияете!)
Когда наступил момент имена областей, я реально обалдел, ты крут!)
Ага, прикольная штука
@@FreelancerLifeStyle ты пользуешься гридами?
Ахренеть какая крутая штука эти гриды! Как досадно что я не научился этому раньше(
Огромная благодарность за данный контент и правда лучший канал для обучения из тех что знаю )
спасибо
Спасибо за такой прекрасный видеоурок! Уже давно являюсь зрителем вашего канала, и в восторге от каждого видеоролика! Продолжайте в том же духе, у вас талант преподавателя.
Спасибо!
Спасибо за урок, искренне благодарен. Не представляю сколько бы времени потратил на изучение данной темы без ютуба и собственно твоего канала!))
Ух, наконец-то решил изучить гриды и сразу же к тебе на канал! Все круто объясняешь, с примерами! Благодарю!
Давай Жека топи! Лайк не вглядываясь
Спасибо!
Очень классные уроки. Настолько доходчиво доносить информацию можете только вы. Просто божественно.
Я рад!
Твои уроки самые лучшие, спасибо тебе огромное!!!
Пожалуйста!
Мне очень понравился урок! Я понял что почти ничего не знаю о гридах.
Жду новых уроков.!
Спасибо!
Пожалуйста!
просто он обьясняет хуево
Мой 300-й лайк! Не последний! Отличное видео!
Спасибо!
Ваши видео очень познавательные и интересные!
Спасибо огромное за Ваш курс!
Вы единственный человек которого я видел на площадке youtube, который очень просто и доходчиво посвящает в web разработку))
господи, кто может ставить дизы Жеке? это же прекрасный контент!
У вас талант к преподаванию.
Спасибо!
Кращий!
Вот я и взялась изучать гриды, под Вашим руководством. Все понятно, все четко расписано. Спасибо огромное за Ваши уроки.
Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.
Благодарю за уроки!
Спасибо, Женя! Крутое объяснение, как всегда!
Супер, не перестаю вчитись по твоїм відео, ти перевернув моє уявлення про CSS!
Отлично! Как всегда! Спасибо большое!