CSS Grid Layout. Свойства элементов grid сетки grid-row grid-column order gap и другие

  Переглядів 105,800

Фрілансер по життю

Фрілансер по життю

День тому

Продолжаем изучать Grid Layout и сегодня поговорим о элементах Grid сетки, а именно о перемещении сортировке и выравнивании Grid элементов свойствами grid-row-start, grid-column-start, grid-row-end, grid-column-end. Именованные линии сетки. Порядок вывода элементов Grid сетки с помощью order. Выравнивание элементов сетки align-items, justify-items, justify-self и align-self. Промежутки между элементами сетки row-gap, column-gap и gap.
👉Весь прейлист CSS Grid Layout: - • CSS Grid Layout
Содержание:
00:00 - Введение
00:16 - Основные особенности
01:49 - Перемещение элементов сетки
05:02 - Имена линий сетки
07:24 - Порядок вывода
07:47 - Выравнивание элементов сетки
10:27 - Промежутки между элементами сетки
11:36 - Напутствие
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

КОМЕНТАРІ: 184
@p.polunin
@p.polunin Рік тому
Полазил в интернете, почитал про тебя, какой у тебя был интересный путь становления. Я очень рад, что есть такие люди с завидным упорством. Ты вложился в это дело, теперь раздаешь другим. Мало таких, с большим сердцем!
@user-rv1gn7qn3s
@user-rv1gn7qn3s 2 роки тому
Жека спасибо большое, так качественно даже за деньги не делают, очень ценю тебя, лучший!
@shukonfadah5725
@shukonfadah5725 2 роки тому
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
@user-xu5zs2mw8s
@user-xu5zs2mw8s 2 роки тому
думал что Grid, это очень очень темный лес, но после увиденного, начинаю в него влюбляться все больше и больше !!! как всегда , ОГРОМНОЕ СПАСИБИЩЕ за столь четкую и ясную информацию!
@ThevideOoLoadeR
@ThevideOoLoadeR 3 роки тому
Женя, спасибо за все твои уроки, пока что ты для меня - фаворит в эффективности донесения информации, просто не перестаю удивляться такому качеству, ещё и за бесплатно. Лучший.
@evrozah1
@evrozah1 2 роки тому
Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.
@user-qn7zf9js3y
@user-qn7zf9js3y 3 роки тому
Спасибо огромное! Стабильно качественный и информативный урок!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Пожалуйста!
@yanareva3732
@yanareva3732 2 роки тому
@@FreelancerLifeStyle пп
@LordOzzy1986
@LordOzzy1986 2 роки тому
полностью поддерживаю!
@timgluk
@timgluk 3 роки тому
Спасибо за информативный урок.
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Пожалуйста!
@user-gh3bo9qr5y
@user-gh3bo9qr5y 3 роки тому
Бесконечно благодарен! Просто, понятно и практично. Лучшие уроки!
@Yupitrer
@Yupitrer Рік тому
Мощны... Тобто, потужний урок. Що треба!
@SemenAlexndrovich
@SemenAlexndrovich 3 роки тому
Отличные уроки по Grid CSS! Спасибо огромное!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Пожалуйста!
@CentnerGovna
@CentnerGovna Рік тому
Огромное спасибо! Очень информативно, профессионально, полезно, а самое главное, не скучно!
@kristinaalex8025
@kristinaalex8025 3 роки тому
Суперские уроки! Спасибо большое!! Все понятно и доходчиво!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Я рад!
@IT-Svyatoslav
@IT-Svyatoslav 3 роки тому
Ураааа!!! Новый урок по Grid!!! Женя, спасибо! Люблю учить верстку по твоим урокам.
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Пожалуйста!
@le0messi
@le0messi Рік тому
Как у вас успехи спустя 2 года?
@annasahradyan9849
@annasahradyan9849 3 роки тому
Спасибо большое ,с вашей помощью делаю сайт для резюме ,обожаю Ваши слова ,вот бы и дети мои слушали Вас.
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Я рад!
@V4VFAloj7juAyQW
@V4VFAloj7juAyQW 3 роки тому
Большое спасибо. Очень полезно и наглядно. Стандартно наивысшее качество!
@AntaresOneTwo
@AntaresOneTwo 3 роки тому
Круто! Жду следующую часть!!!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Работаю
@user-hq3yr6fu6r
@user-hq3yr6fu6r 3 роки тому
Доступно, классно и понятно, очень хороший контент! Благодарю!
@user-rs2mz2hv1y
@user-rs2mz2hv1y 2 роки тому
В очередной раз говорю тебе Спасибо за твои суперские уроки!!!
@onlytherareness
@onlytherareness 3 роки тому
супер уроки, очень доходчиво! спасибо большое! всех благ!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Пожалуйста!
@old__gamer
@old__gamer 3 роки тому
Молодец ! Продолжай в том же духе. Уроки очень приятно смотреть.
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Спасибо!
@MxM_5835
@MxM_5835 2 роки тому
Жека ты как всегда на высоте! Спасибо за хорошее объяснение
@kotiko_oks
@kotiko_oks 3 роки тому
посмотрел все выпуски🥰 и лайкнул ❤
@aleksgbr3878
@aleksgbr3878 3 роки тому
Очень доходчиво и наглядно))) спасибо!!!
@iamcarinn
@iamcarinn 2 роки тому
плейлисты по flex и grid просто золотые! огромное вам спасибо!
@k4ch856
@k4ch856 3 роки тому
здравствуйте,Евгений.Как всегда понятно и качественно.Хотелось бы увидеть ещё видео про адаптив
@maxfatyanov7096
@maxfatyanov7096 3 роки тому
Уже было. ukposts.info/have/v-deo/kJKfdYGhoaKYxGg.html
@svetlanaandreeva8762
@svetlanaandreeva8762 2 роки тому
Спасибо большое!! Все понятно и доходчиво! Лучшие уроки!
@user-tg9mc8bf1s
@user-tg9mc8bf1s 2 роки тому
Замечательное объяснение. Все четко и понятно!
@DashaG182
@DashaG182 3 роки тому
Женя, ты супер! Как всегда)
@user-kb9gq1lz7d
@user-kb9gq1lz7d Рік тому
Женя, дуже дякую! Корисно та доступно!
@Xyjail
@Xyjail Рік тому
Преподавание шедеврально) Спасибо)
@oleboz95
@oleboz95 Рік тому
Гарний контент, дякую
@no_name_2mix
@no_name_2mix 3 роки тому
Спасибо) Ваши видео оч приятно смотреть.
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Я рад!
@user-wy3qc2jo1z
@user-wy3qc2jo1z 2 роки тому
Ты лучший и останешься им! И спасибо, что освещаешь реальные события!
@user-vj1rm5nd1h
@user-vj1rm5nd1h 3 роки тому
Спасибо за гриды!👍
@alshabanov
@alshabanov 3 роки тому
Спасибо за урок :))
@o_antushevich
@o_antushevich 2 роки тому
Спасибо за отличный урок!
@user-xf5wu5sb5c
@user-xf5wu5sb5c Рік тому
Чудове відео! Дякую!🙏
@dvsDesing
@dvsDesing 2 роки тому
Спасибо за туториал!
@user-bx6wj9lf3s
@user-bx6wj9lf3s Рік тому
Смотришь и наслаждаешься!
@artyomnazarov8518
@artyomnazarov8518 2 роки тому
Оказалось не так сложно. Спасибо!!!
@bohdandudchenko939
@bohdandudchenko939 3 роки тому
Жека, огромное тебе спасибо!
@ivanryapolov7903
@ivanryapolov7903 3 роки тому
Збыл сказать СПАСИБО. Ты - лучший.
@Anatoli-bq1pe
@Anatoli-bq1pe Рік тому
Как всегда - класс!
@fallenstar358
@fallenstar358 3 роки тому
Посмотрел всё и это было круто!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Я рад!
@pro_massages
@pro_massages 2 роки тому
Женя спасибо тебе огромное!
@aleksandrayavorskaya1523
@aleksandrayavorskaya1523 3 роки тому
!!! Спасибо тебе, Человек!!!
@user-js1zx2wz3i
@user-js1zx2wz3i Рік тому
Контент - СУПЕР! Слідуючи порадам Жеки, під час освоєння нового матеріалу, завжди себе себе запитую "А що , якщо?..." (Ось тут виникло запитання !) : "А що, якщо я хочу дублювати якийсь елемент грід-сітки? Відобразити його кілька разів ? Повторити у різних областях або ж просто не займатися Ctrl+C & Ctrl+V у html-файлі ? ", в Google поки ще не знайшов ))
@user-iy7nj4is4n
@user-iy7nj4is4n 3 роки тому
Просто нет слов все очень круто
@user-fg8pq3kk5l
@user-fg8pq3kk5l 2 роки тому
Спасибо, Жека!!!
@user-vl3fc1pv3c
@user-vl3fc1pv3c 2 роки тому
Дуже Хороший урок... Величезне Вам "Дякую"...
@user-rr8kx9rc2m
@user-rr8kx9rc2m 3 роки тому
Женя топ как всегда пересмотрю ещё раз что))), жду шпору
@alexandrminakov97
@alexandrminakov97 2 роки тому
Спасибо за ролик
@alexbel5599
@alexbel5599 3 роки тому
Спасибо 🤘
@Andrey_Mendel
@Andrey_Mendel 8 місяців тому
Дякую!!
@keks_o4162
@keks_o4162 2 роки тому
Оч крутой туториал!
@Faradenza-sb3mj
@Faradenza-sb3mj Рік тому
Лайк за очень познавательный контент
@PorohTech
@PorohTech 3 роки тому
Жду продолжение!!!!
@user-ys3in6qx6f
@user-ys3in6qx6f 2 роки тому
Спасибо! 👍✨
@FradPR
@FradPR 6 місяців тому
Дякую за урок!
@danilbadretdinov2787
@danilbadretdinov2787 2 роки тому
На уровне!
@user-ru2hw9vv5h
@user-ru2hw9vv5h Рік тому
Молодчага!
@oleksandrradoshniuk7055
@oleksandrradoshniuk7055 3 роки тому
Спасибо)
@user-rc4yd1kx4t
@user-rc4yd1kx4t 2 роки тому
Спасибо!!!
@Dbond1979
@Dbond1979 3 роки тому
Жека Спасибо!!!
@mrSturnn
@mrSturnn 3 роки тому
Много обучающих видео просмотрел, но только у Жеки качество на таком высоком уровне.
@AlinaEmv
@AlinaEmv 2 роки тому
Для таких полезных видео слишком мало лайков... непорядок! Ребята видимо хотят слушать песни Аллы Пугачевой под балконом и усиков на фотографиях🤣🤣 Обожаю ваш канал с вашим юмором. Продолжайте в том же духе🔥🔥🔥
@user-wy1qd5oi3v
@user-wy1qd5oi3v 3 роки тому
Класс!👌
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Спасибо!
@user-rq5jw1iw3m
@user-rq5jw1iw3m 3 роки тому
Офигеть... так круто разжевать гриды. Это - нечто.
@dimapnzn725
@dimapnzn725 3 роки тому
Топовый урок, для новичка в верстке мало подробностей конечно, но всё понятно и можно самому разобраться в остальном)
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Там 4ре части про гриды, надеюсь информации достаточно
@bosbos4888
@bosbos4888 3 роки тому
крутой туториал
@baikovamaria5725
@baikovamaria5725 2 роки тому
Спасибо
@user-yi9gy4cz7n
@user-yi9gy4cz7n 3 роки тому
Жесть как круто!
@user-tz9ed5qu3g
@user-tz9ed5qu3g 2 роки тому
Привет Жека) немного запутал. Говоришь колонки, когда нужно говорить про линии сетки. Если бы не внимательно смотрел предыдущие уроки так бы и не понял о чём ты. На 04:00 говоришь, что стартует с 3-й колонки, хотя стартует с третей линии. Спасибо за уроки, ты лучший:3
@FastBimer
@FastBimer Рік тому
Дякую!)
@phoenixbeard8543
@phoenixbeard8543 Рік тому
Файно))
@user-qc2bl7yo6u
@user-qc2bl7yo6u 3 роки тому
Топ контент
@user-bx8hh7xj8q
@user-bx8hh7xj8q Рік тому
Дякую!
@velobarahlo
@velobarahlo 3 роки тому
спасибо!
@ivangureev3036
@ivangureev3036 2 роки тому
"Вычисления weeds and high" - норм тема 🥸
@VM_Dev_tv
@VM_Dev_tv 3 роки тому
ты крут.......
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Спасибо!
@MaximVernigorov
@MaximVernigorov 3 роки тому
Лучший!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Спасибо!
@user-vi7qi9ly9r
@user-vi7qi9ly9r Рік тому
thanks
@Dmytro-DIY
@Dmytro-DIY 2 роки тому
Let`s go!
@bigthinks2290
@bigthinks2290 3 роки тому
Пушка!
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Спасибо!
@MegaTesei
@MegaTesei 3 роки тому
Записываю важные данные в блокнот по тем видео которые есть в курсе. Как Вы делали в начальных уроках курса, мне это помогает, так как не всегда удобно искать в браузере/закладках данные шпаргалки. Периодически, я читаю эти записи и вспоминаю пройденное. И, тут меня посетила идея, прекрасно бы было иметь методичку по данному курсу. В ней бы были собраны те данные из записей блокнота и указаны узкие места (типа, где не стоит применять процентные
@user-xi7xk7lc6x
@user-xi7xk7lc6x 3 роки тому
Здравствуйте!! Уроки просто топ))!! Спасибо) А как вы показываете верстку заказчику перед оплатой? Заранее спасибо))
@user-jc5yr6wz5i
@user-jc5yr6wz5i 3 роки тому
Уроки клас, спасибо. С каждым новым видео понимаю все меньше😁. Flexы были понятнее 🤔
@masterbiz100
@masterbiz100 3 роки тому
Просто гриды нужно больше практиковать. Простым просмотром уроков ты полного понимания не добьешься, пока сам не "поиграешься" с версткой. Если интересно - есть онлайновый игровой тренажер для практического освоения гридов cssgridgarden.com/#ru
@targarien57d86
@targarien57d86 3 роки тому
@@masterbiz100 крутой тренажор, а есть еще какие небудь тренажори на русском?
@bq6677
@bq6677 3 роки тому
💪
@example6963
@example6963 3 роки тому
Привет Жека! А когда урок по swiper JS?
@user-dy4mv3ev4c
@user-dy4mv3ev4c 7 місяців тому
Zoʻr
@violentiner
@violentiner 3 роки тому
Привет Евгеш, как всегда спасибо за инфу, очень достойно, ответь пожалуйсто на пару вопросов: когда планируеш закончить плейлист по гридам(хотябы примерно) и интересует как вообще этот грид по юзабилити, часто ли ты его используеш?можно ли обойтись флексами или есть ряд задач которые можно выполнить ТОЛЬКО прибегая к гридам?Или ты как бы вместе с нами его изучаеш и в реал лайфе не юзаеш?
@bekermamatov7049
@bekermamatov7049 2 роки тому
норм он тебе ответил
@user-bb6fc7hp3j
@user-bb6fc7hp3j 3 роки тому
Привет Жека. Есть просьба - (при последующих записях) если есть возможность, выдели курсор мышки цветным бекграундом, чтоб было понятно где сейчас курсор на экране. Спасибо
@user-od9sm2pl9f
@user-od9sm2pl9f 3 роки тому
Как всегда the best !!! А я через grid-area создаю разметку. Это не ошибка с моей стороны? .item-header { grid-area: 1/1/2/5; }
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Я вот как раз об этом и не говорил, так как слишком запутанно. Лучше сначала проработать более простые записи
@user-od9sm2pl9f
@user-od9sm2pl9f 3 роки тому
@@FreelancerLifeStyle благодарю
@Salykin-pro
@Salykin-pro 3 роки тому
🔥👍🔥
@FreelancerLifeStyle
@FreelancerLifeStyle 3 роки тому
Спасибо!
@Salykin-pro
@Salykin-pro 3 роки тому
@@FreelancerLifeStyle Тебе спасибо!!!
@bekermamatov7049
@bekermamatov7049 2 роки тому
обоим вам спасибо
@user-jw3oe1bw5x
@user-jw3oe1bw5x 2 роки тому
Спасибо за материал. Подскажите, если нужно удалить скажем второй блок грида, что бы затем вся сетка схлопнулась как это сделать? Сделал пока так, удаляемому блоку присвоил свойства order с максимальным значением (число больше чем у вас в сетки блоков), а затем уничтожаю блок. Может есть более правильный вариант? Обновление сетки грида? Спасибо.
@4ORESIGHT
@4ORESIGHT 2 роки тому
Женя, здравствуй! Подскажи пожалуйста, почему на 4:40 при задании растяжения по сетке на три колонки (grid-column-start: span 3;), у нас перестает работать свойство для растяжения по строкам (grid-row-start: span 2;)? Причем, простировав это дело у себя, я заметил, что такое поведение наблюдается, только если это у нас самый первый элемент в сетке.
@yuriismakota9574
@yuriismakota9574 3 роки тому
Мда, гриды пока что, трудноваты для усвоения, хотя достаточно интересны и универсальны в использовании. Вопрос: Женя, как часто приходилось использовать на практике гриды? И конечно же, огромное спасибо за уроки!
@le0messi
@le0messi Рік тому
Добрый вечер, к ак у вас успехи спустя 2 года?
@Tigran5233
@Tigran5233 3 роки тому
Давно не смотрел плейлист, решил допройти. Поэтому надеюсь на Вашу помощь, Жека, а то недопонял. Вы говорили, что если для элемента сетки добавить margin, он не будет схлопываться. Не совсем просто понял, в силу того, что давно не практиковался, что означает схлопывание? Заранее спасибо за ответ!
@bekermamatov7049
@bekermamatov7049 2 роки тому
это когда в двух соседних марджинах, тот что побольше, съедает того что по меньше. и в итоге два марджина не складываются, а остается только больший марджин. меньший тоже остается, но внутри большого
@user-eh7no3me3x
@user-eh7no3me3x 3 роки тому
запиши небольшое видео как пользоваться Devtools =)
CSS Grid Layout. Практика + шпаргалка.
34:22
Фрілансер по життю
Переглядів 172 тис.
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Slaying The Dragon
Переглядів 434 тис.
Nemo - The Code (LIVE) | Switzerland🇨🇭| Grand Final | Eurovision 2024
03:28
Eurovision Song Contest
Переглядів 15 млн
Что такое TCP/IP: Объясняем на пальцах
15:38
ТРИЗ - инструмент решения задач, которые представляются нерешаемыми.
23:22
CSS Grid Layout. Кроссбраузерность. Grid и Flex. Основные понятия.
6:58
Фрілансер по життю
Переглядів 205 тис.
Самые СМЕШНЫЕ ошибки перевода: американец разбирает все ляпы в английском
20:17
Skyeng: онлайн-школа английского языка
Переглядів 236 тис.
Про Kafka (основы)
49:23
Владимир Богдановский
Переглядів 345 тис.
Python vs C/C++ vs Assembly side-by-side comparison
1:01
Адаптивная верстка на CSS Grid для интернет магазина. Использование grid areas
29:07
Nemo - The Code (LIVE) | Switzerland🇨🇭| Grand Final | Eurovision 2024
03:28
Eurovision Song Contest
Переглядів 15 млн