CSS Grid Layout. Свойства определения сетки grid-template и другие
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 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 th-cam.com/video/GV92IdMGFfA/w-d-xo.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 по твоему плейлисту!
Спасибо!
@@FreelancerLifeStyle Спасибо за плейлист и канал в целом. Очень полезно и понятно. И красиво.
Вот я и взялась изучать гриды, под Вашим руководством. Все понятно, все четко расписано. Спасибо огромное за Ваши уроки.
Какой же классный урок! Спасибо Женя!!!
Ух, наконец-то решил изучить гриды и сразу же к тебе на канал! Все круто объясняешь, с примерами! Благодарю!
Спасибо, Женя! Крутое объяснение, как всегда!
Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.
Очень интересное свойство. Очень доступно преподнесено. Пытаюсь вообразить все возможные варианты применения данного свойства... с нетерпением жду практики)
Огромная благодарность за данный контент и правда лучший канал для обучения из тех что знаю )
Спасибо! Как всегда, на высшем уровне!
Спасибо за урок, искренне благодарен. Не представляю сколько бы времени потратил на изучение данной темы без ютуба и собственно твоего канала!))
Очень классные уроки. Настолько доходчиво доносить информацию можете только вы. Просто божественно.
Я рад!
Супер, не перестаю вчитись по твоїм відео, ти перевернув моє уявлення про CSS!
Спасибо! Лучшее пояснение, которое нашел. Все по полочкам!
Мне очень понравился урок! Я понял что почти ничего не знаю о гридах.
Жду новых уроков.!
Спасибо!
Пожалуйста!
просто он обьясняет хуево
Ваши видео очень познавательные и интересные!
Спасибо огромное за Ваш курс!
Вы единственный человек которого я видел на площадке youtube, который очень просто и доходчиво посвящает в web разработку))
Это реально бомбовый урок, впечатлен свойствами сетки.
Как всегда отличная подача материала)
Отлично! Как всегда! Спасибо большое!
Детально і Конкретно, Дуже Хороший урок... Дякую Вам
Жека, благодарю!! Очередная годнота.
Пожалуйста!
Спасибо за такие качественные уроки!
Комментарий в поддержку видео/канала. Хорошая подача, годный контент 👍
Благодарю за уроки!
Очень хорошо объяснил. Спасибо!
Твои уроки самые лучшие, спасибо тебе огромное!!!
Пожалуйста!
Дякую за неймовірне відео, завжди сприймається легко і доступно
Євгене, красно дякую за чудову подачу інфи і круте розтлумачення!!!
Спасибо, Жека! Учусь по твоим урокам)
Пожалуйста!
Большое спасибо за ваши уроки
Большое спасибо за полезный урок!
Урок как всегда отличный, без воды, материал изложен так сказать из простого к сложному. Остается только потренироваться и применять на практике. Спасибо!
Все верно, пожалуйста!
Учусь уже месяц, Женя , твоя фоновая музыка у меня практически постоянно в голове))))Спасибо тебе за уроки, но кукуха реально едет от инфы и музыки)
Спасибо огромное, как всегда топ!
Пожалуйста!
Знаком с grid, но после этого видео узнал новые свойства, grid контейнера, Круто!👍
Спасибо, Женя! Огонь!
пожалуйста!
Спасибо большое! Видео помогло решить мою задачу)
Спасибо за такой прекрасный видеоурок! Уже давно являюсь зрителем вашего канала, и в восторге от каждого видеоролика! Продолжайте в том же духе, у вас талант преподавателя.
Спасибо!
Отличное видео. Всё понятно. Теперь знаю как управлять грибами припостроении интерфейса.
Благодарю за ваш труд!
Пожалуйста!
красавчик, продолжай в том же духе!
Продолжаю!
Спасибо, смотрим дальше)
Большое спасибо за этот урок! Я вас в прошлых критиковал, всё никак не доходило до конца, а тут полностью дошло. Долго пытался разобраться с гридами и всё не получалось. Ради интереса переделал ваш двухколоночный макет в трехколоночный плюс футер, и всё это оказалось легко и просто. Использование grid-template даже проще в понимании логики процесса за grid-template-rows + grid-template-columns + grid-template-areas, хотя бы тем, что строки ты прописываешь каждую на отдельной строке, прям как эти строки будут отображаться в макете, а не в ряд как в grid-template-rows, а колонки в одну строку, что тоже удобно, так как создается виртуальное представление колонок.
Так много интересного , спасибо)
Это просто пушка! Спасибо!)
Евгений, МЕГА круто!!!! Спасибо!!!!
Пожалуйста!
Красавчик! Все подробно доступно.
Я рад!
самые лучшие и главное понятные объяснения о верстке, без вас я бы еще дольше по времени разбирался. Евгений вы лучший, такое чувство что за работу взялся самый настоящий перфекционист, который понимает что надо для новичка.
но у меня еще предложение: как вам идея сделать разбор об инспекторе браузеров? об их фишках и полезностях.
так же хотелось бы чтобы еще были макеты для фигмы, поскольку лайфхак с аккаунтами для авакода не работает, по-крайней мере у меня((
но в любом случае, мое тебе почтение и уважение евгений
Спасибо! Очень крутая штука!
Спасибо! Очень нужный материал ! Ты лучший
Спасибо! Я рад
Спасибо все чётко и понятно!!!
Я рад!
Шикарно! Прошел на FreeCodeCamp сейчас блок на эту тему и не особо понял. А тут посмотрел, и как будто бы понял). Спасибо большущее!
Жека, видео позновательное, спасибо тебе за твои уроки
Пожалуйста!
Пишу немного backend на фреймворках. Решил вот сделать свою верстку чтобы применить как шаблон темы и по ходу я застрял на Вашем канале!:))) Очень впечатляет! Спасибо за Ваш труд. Однозначно лайк!
Спасибо большое за полезный урок!
Пожалуйста!
благодарю за качественный контент, которые вы нам предоставили сенсай :)
Відео подивився, ручками прописав все те саме, лайк поставив, йду дивитись наступний урок!
Блин, это просто супер!! Большое спасибо!
Пожалуйста!
Євген дуже дякую за вашу працю ❗Навчаюсь з задоволенням, дуже гарно викладаєте матеріал... Сподіваюсь що в мене все вдасться 👍🤝👌❗
Відео супер, дякую!!!
Огромное спасибо, ты лучший)
Пожалуйста!
Класcная штучка этот Grid Layout! И, да, красивые фотки у фонтана!
Гениально! спасибо!
Спасибо за помощь!
Дякую Жека. Крутий контент
Когда наступил момент имена областей, я реально обалдел, ты крут!)
Ага, прикольная штука
@@FreelancerLifeStyle ты пользуешься гридами?
Хорошо, отлично, замечательно :)
Спасибо!
Просто получаю интеллектуальное наслаждение))
Я рад!
Просто оставлю лайк и коммент, для поддержки, так сказать :)
Спасибо, Жека!!!
"Но и это еще не все!" :)
Дякую! Все зрозуміло.
Отличный канал, отличное и информативное видео. При просмотре 20-ти минутного видео становится немного скучно, но всё отлично! Удачи в развитии канала!!
Все подробно доступно
спасибо за видео, оч помог!
Спасибо, Сенсей!
вы как всегда прекрасны! Прям солнышко, сияете!)
Огромное спасибо!
Большое спасибо!)
Спасибо за всё)))
отличный урок!
Ахренеть какая крутая штука эти гриды! Как досадно что я не научился этому раньше(
Ураа! Спасибо, вы лучший!
Пожалуйста!
Как всегда топ 😊
Спасибо!
Спасибо! 👍✨
Спасибо, очень классно смотреть, все очень доступно! жду с нетерпением продолжения! Есть один вопрос: как насчет кроссбраузерности? Ты о ней пока не говоришь, но грид ведь капризничает на сафари например, может ты бы этих тем тоже касался сразу?
Великолепно!
Спасибо!
спасибо вам большое
Это реально удобней флексов
Давай Жека топи! Лайк не вглядываясь
Спасибо!
На протяжении всего видео думал что это все! НО НЕТ!!!)))
Хех)
Клас! Спасибо!!)
Пожалуйста!
Вы супер)