CSS Grid Layout. Свойства элементов grid сетки grid-row grid-column order gap и другие
Рет қаралды 106,831
Күн бұрынПродолжаем изучать 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
🤟 Живи, а работай в свободное время! ©
@p.polunin Жыл бұрын
Полазил в интернете, почитал про тебя, какой у тебя был интересный путь становления. Я очень рад, что есть такие люди с завидным упорством. Ты вложился в это дело, теперь раздаешь другим. Мало таких, с большим сердцем!
@user-rv1gn7qn3s 2 жыл бұрын
Жека спасибо большое, так качественно даже за деньги не делают, очень ценю тебя, лучший!
@user-xu5zs2mw8s 2 жыл бұрын
думал что Grid, это очень очень темный лес, но после увиденного, начинаю в него влюбляться все больше и больше !!! как всегда , ОГРОМНОЕ СПАСИБИЩЕ за столь четкую и ясную информацию!
@shukonfadah5725 2 жыл бұрын
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
@user-qn7zf9js3y 4 жыл бұрын
Спасибо огромное! Стабильно качественный и информативный урок!
@FreelancerLifeStyle 4 жыл бұрын
Пожалуйста!
@yanareva3732 3 жыл бұрын
@@FreelancerLifeStyle пп
@LordOzzy1986 2 жыл бұрын
полностью поддерживаю!
@evrozah1 2 жыл бұрын
Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.
@Yupitrer Жыл бұрын
Мощны... Тобто, потужний урок. Що треба!
@user-bx6wj9lf3s Жыл бұрын
Смотришь и наслаждаешься!
@timgluk 3 жыл бұрын
Спасибо за информативный урок.
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@ThevideOoLoadeR 3 жыл бұрын
Женя, спасибо за все твои уроки, пока что ты для меня - фаворит в эффективности донесения информации, просто не перестаю удивляться такому качеству, ещё и за бесплатно. Лучший.
@SemenAlexndrovich 3 жыл бұрын
Отличные уроки по Grid CSS! Спасибо огромное!
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@CentnerGovna 2 жыл бұрын
Огромное спасибо! Очень информативно, профессионально, полезно, а самое главное, не скучно!
@kristinaalex8025 4 жыл бұрын
Суперские уроки! Спасибо большое!! Все понятно и доходчиво!
@FreelancerLifeStyle 4 жыл бұрын
Я рад!
@user-gh3bo9qr5y 3 жыл бұрын
Бесконечно благодарен! Просто, понятно и практично. Лучшие уроки!
@annasahradyan9849 3 жыл бұрын
Спасибо большое ,с вашей помощью делаю сайт для резюме ,обожаю Ваши слова ,вот бы и дети мои слушали Вас.
@FreelancerLifeStyle 3 жыл бұрын
Я рад!
@AntaresOneTwo 3 жыл бұрын
Круто! Жду следующую часть!!!
@FreelancerLifeStyle 3 жыл бұрын
Работаю
@V4VFAloj7juAyQW 4 жыл бұрын
Большое спасибо. Очень полезно и наглядно. Стандартно наивысшее качество!
@aleksgbr3878 4 жыл бұрын
Очень доходчиво и наглядно))) спасибо!!!
@kotiko_oks 3 жыл бұрын
посмотрел все выпуски🥰 и лайкнул ❤
@user-hq3yr6fu6r 3 жыл бұрын
Доступно, классно и понятно, очень хороший контент! Благодарю!
@iamcarinn 2 жыл бұрын
плейлисты по flex и grid просто золотые! огромное вам спасибо!
@user-tg9mc8bf1s 2 жыл бұрын
Замечательное объяснение. Все четко и понятно!
@o_antushevich 2 жыл бұрын
Спасибо за отличный урок!
@svetlanaandreeva8762 2 жыл бұрын
Спасибо большое!! Все понятно и доходчиво! Лучшие уроки!
@DashaG182 4 жыл бұрын
Женя, ты супер! Как всегда)
@Xyjail Жыл бұрын
Преподавание шедеврально) Спасибо)
@alshabanov 4 жыл бұрын
Спасибо за урок :))
@user-rs2mz2hv1y 2 жыл бұрын
В очередной раз говорю тебе Спасибо за твои суперские уроки!!!
@user-wy3qc2jo1z 2 жыл бұрын
Ты лучший и останешься им! И спасибо, что освещаешь реальные события!
@user-vj1rm5nd1h 4 жыл бұрын
Спасибо за гриды!👍
@aleksandrayavorskaya1523 3 жыл бұрын
!!! Спасибо тебе, Человек!!!
@IT-Svyatoslav 4 жыл бұрын
Ураааа!!! Новый урок по Grid!!! Женя, спасибо! Люблю учить верстку по твоим урокам.
@FreelancerLifeStyle 4 жыл бұрын
Пожалуйста!
@le0messi Жыл бұрын
Как у вас успехи спустя 2 года?
@onlytherareness 3 жыл бұрын
супер уроки, очень доходчиво! спасибо большое! всех благ!
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@MxM_5835 2 жыл бұрын
Жека ты как всегда на высоте! Спасибо за хорошее объяснение
@pro_massages 3 жыл бұрын
Женя спасибо тебе огромное!
@bohdandudchenko939 3 жыл бұрын
Жека, огромное тебе спасибо!
@Anatoli-bq1pe Жыл бұрын
Как всегда - класс!
@dvsDesing 2 жыл бұрын
Спасибо за туториал!
@alexbel5599 3 жыл бұрын
Спасибо 🤘
@old__gamer 4 жыл бұрын
Молодец ! Продолжай в том же духе. Уроки очень приятно смотреть.
@FreelancerLifeStyle 4 жыл бұрын
Спасибо!
@alexandrminakov97 2 жыл бұрын
Спасибо за ролик
@artyomnazarov8518 3 жыл бұрын
Оказалось не так сложно. Спасибо!!!
@ivanryapolov7903 4 жыл бұрын
Збыл сказать СПАСИБО. Ты - лучший.
@no_name_2mix 3 жыл бұрын
Спасибо) Ваши видео оч приятно смотреть.
@FreelancerLifeStyle 3 жыл бұрын
Я рад!
@k4ch856 4 жыл бұрын
здравствуйте,Евгений.Как всегда понятно и качественно.Хотелось бы увидеть ещё видео про адаптив
@maxfatyanov7096 4 жыл бұрын
Уже было. kzfaq.info/get/bejne/jsiedK6bz9LLk2g.html
@danilbadretdinov2787 2 жыл бұрын
На уровне!
@user-fg8pq3kk5l 2 жыл бұрын
Спасибо, Жека!!!
@user-rc4yd1kx4t 2 жыл бұрын
Спасибо!!!
@user-iy7nj4is4n 3 жыл бұрын
Просто нет слов все очень круто
@Faradenza-sb3mj Жыл бұрын
Лайк за очень познавательный контент
@fallenstar358 4 жыл бұрын
Посмотрел всё и это было круто!
@FreelancerLifeStyle 4 жыл бұрын
Я рад!
@oleksandrradoshniuk7055 4 жыл бұрын
Спасибо)
@user-xf5wu5sb5c Жыл бұрын
Чудове відео! Дякую!🙏
@PorohTech 3 жыл бұрын
Жду продолжение!!!!
@user-ys3in6qx6f 2 жыл бұрын
Спасибо! 👍✨
@user-kb9gq1lz7d Жыл бұрын
Женя, дуже дякую! Корисно та доступно!
@keks_o4162 2 жыл бұрын
Оч крутой туториал!
@Dbond1979 3 жыл бұрын
Жека Спасибо!!!
@user-rr8kx9rc2m 4 жыл бұрын
Женя топ как всегда пересмотрю ещё раз что))), жду шпору
@baikovamaria5725 2 жыл бұрын
Спасибо
@user-wy1qd5oi3v 4 жыл бұрын
Класс!👌
@FreelancerLifeStyle 4 жыл бұрын
Спасибо!
@FradPR 9 ай бұрын
Дякую за урок!
@user-ru2hw9vv5h Жыл бұрын
Молодчага!
@mrSturnn 3 жыл бұрын
Много обучающих видео просмотрел, но только у Жеки качество на таком высоком уровне.
@user-rq5jw1iw3m 3 жыл бұрын
Офигеть... так круто разжевать гриды. Это - нечто.
@oleboz95 Жыл бұрын
Гарний контент, дякую
@bosbos4888 3 жыл бұрын
крутой туториал
@user-js1zx2wz3i Жыл бұрын
Контент - СУПЕР! Слідуючи порадам Жеки, під час освоєння нового матеріалу, завжди себе себе запитую "А що , якщо?..." (Ось тут виникло запитання !) : "А що, якщо я хочу дублювати якийсь елемент грід-сітки? Відобразити його кілька разів ? Повторити у різних областях або ж просто не займатися Ctrl+C & Ctrl+V у html-файлі ? ", в Google поки ще не знайшов ))
@velobarahlo 3 жыл бұрын
спасибо!
@oleg_andrianov 3 жыл бұрын
Жесть как круто!
@user-vl3fc1pv3c 2 жыл бұрын
Дуже Хороший урок... Величезне Вам "Дякую"...
@phoenixbeard8543 Жыл бұрын
Файно))
@VM_Dev_tv 3 жыл бұрын
ты крут.......
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@MaximVernigorov 3 жыл бұрын
Лучший!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@user-vi7qi9ly9r Жыл бұрын
thanks
@user-qc2bl7yo6u 3 жыл бұрын
Топ контент
@dimapnzn725 3 жыл бұрын
Топовый урок, для новичка в верстке мало подробностей конечно, но всё понятно и можно самому разобраться в остальном)
@FreelancerLifeStyle 3 жыл бұрын
Там 4ре части про гриды, надеюсь информации достаточно
@user-tz9ed5qu3g 2 жыл бұрын
Привет Жека) немного запутал. Говоришь колонки, когда нужно говорить про линии сетки. Если бы не внимательно смотрел предыдущие уроки так бы и не понял о чём ты. На 04:00 говоришь, что стартует с 3-й колонки, хотя стартует с третей линии. Спасибо за уроки, ты лучший:3
@Andrey_Mendel 11 ай бұрын
Дякую!!
@FastBimer 2 жыл бұрын
Дякую!)
@bigthinks2290 3 жыл бұрын
Пушка!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@user-bx8hh7xj8q Жыл бұрын
Дякую!
@AlinaEmv 2 жыл бұрын
Для таких полезных видео слишком мало лайков... непорядок! Ребята видимо хотят слушать песни Аллы Пугачевой под балконом и усиков на фотографиях🤣🤣 Обожаю ваш канал с вашим юмором. Продолжайте в том же духе🔥🔥🔥
@ivangureev3036 2 жыл бұрын
"Вычисления weeds and high" - норм тема 🥸
@Dmytro-DIY 2 жыл бұрын
Let`s go!
@MegaTesei 3 жыл бұрын
Записываю важные данные в блокнот по тем видео которые есть в курсе. Как Вы делали в начальных уроках курса, мне это помогает, так как не всегда удобно искать в браузере/закладках данные шпаргалки. Периодически, я читаю эти записи и вспоминаю пройденное. И, тут меня посетила идея, прекрасно бы было иметь методичку по данному курсу. В ней бы были собраны те данные из записей блокнота и указаны узкие места (типа, где не стоит применять процентные
@bq6677 4 жыл бұрын
💪
@user-xi7xk7lc6x 3 жыл бұрын
Здравствуйте!! Уроки просто топ))!! Спасибо) А как вы показываете верстку заказчику перед оплатой? Заранее спасибо))
@example6963 4 жыл бұрын
Привет Жека! А когда урок по swiper JS?
@user-dy4mv3ev4c 9 ай бұрын
Zoʻr
@violentiner 3 жыл бұрын
Привет Евгеш, как всегда спасибо за инфу, очень достойно, ответь пожалуйсто на пару вопросов: когда планируеш закончить плейлист по гридам(хотябы примерно) и интересует как вообще этот грид по юзабилити, часто ли ты его используеш?можно ли обойтись флексами или есть ряд задач которые можно выполнить ТОЛЬКО прибегая к гридам?Или ты как бы вместе с нами его изучаеш и в реал лайфе не юзаеш?
@bekermamatov7049 3 жыл бұрын
норм он тебе ответил
@user-jc5yr6wz5i 4 жыл бұрын
Уроки клас, спасибо. С каждым новым видео понимаю все меньше😁. Flexы были понятнее 🤔
@masterbiz100 4 жыл бұрын
Просто гриды нужно больше практиковать. Простым просмотром уроков ты полного понимания не добьешься, пока сам не "поиграешься" с версткой. Если интересно - есть онлайновый игровой тренажер для практического освоения гридов cssgridgarden.com/#ru
@targarien57d86 4 жыл бұрын
@@masterbiz100 крутой тренажор, а есть еще какие небудь тренажори на русском?
@user-eh7no3me3x 4 жыл бұрын
запиши небольшое видео как пользоваться Devtools =)
@user-bb6fc7hp3j 3 жыл бұрын
Привет Жека. Есть просьба - (при последующих записях) если есть возможность, выдели курсор мышки цветным бекграундом, чтоб было понятно где сейчас курсор на экране. Спасибо
@Salykin-pro 3 жыл бұрын
🔥👍🔥
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@Salykin-pro 3 жыл бұрын
@@FreelancerLifeStyle Тебе спасибо!!!
@bekermamatov7049 3 жыл бұрын
обоим вам спасибо
@user-od9sm2pl9f 4 жыл бұрын
Как всегда the best !!! А я через grid-area создаю разметку. Это не ошибка с моей стороны? .item-header { grid-area: 1/1/2/5; }
@FreelancerLifeStyle 4 жыл бұрын
Я вот как раз об этом и не говорил, так как слишком запутанно. Лучше сначала проработать более простые записи
@user-od9sm2pl9f 4 жыл бұрын
@@FreelancerLifeStyle благодарю
@yuriismakota9574 3 жыл бұрын
Мда, гриды пока что, трудноваты для усвоения, хотя достаточно интересны и универсальны в использовании. Вопрос: Женя, как часто приходилось использовать на практике гриды? И конечно же, огромное спасибо за уроки!
@le0messi Жыл бұрын
Добрый вечер, к ак у вас успехи спустя 2 года?
@4ORESIGHT 2 жыл бұрын
Женя, здравствуй! Подскажи пожалуйста, почему на 4:40 при задании растяжения по сетке на три колонки (grid-column-start: span 3;), у нас перестает работать свойство для растяжения по строкам (grid-row-start: span 2;)? Причем, простировав это дело у себя, я заметил, что такое поведение наблюдается, только если это у нас самый первый элемент в сетке.
@user-jw3oe1bw5x 2 жыл бұрын
Спасибо за материал. Подскажите, если нужно удалить скажем второй блок грида, что бы затем вся сетка схлопнулась как это сделать? Сделал пока так, удаляемому блоку присвоил свойства order с максимальным значением (число больше чем у вас в сетки блоков), а затем уничтожаю блок. Может есть более правильный вариант? Обновление сетки грида? Спасибо.
@igorlitvintsev2427 3 жыл бұрын
Спасибо, классный урок) Есть вопрос, не пойму, почему на минуте 4:43, когда мы задали grid-column-start: span 3;, наш первый элемент растянулся на все 3 ячейки, но тут же он перестал занимать 2е строки, хотя grid-row-start: span 2; у нас остался прежним. По идее при коде .grid_item_1 { grid-row-start: span 2; grid-column-start: span 3; } У нас этот первый элемент должен занимать 2 строки и 3 столбца, или это как-то по-другому работает? как-то возможно при использовании span второе свойство убивает первое. Можете пожалуйста объяснить?
@AndreiVelotourist 3 жыл бұрын
Это все связано с явно заданной сеткой: grid-template: repeat(2, 1fr) / repeat(3, 1fr); Если использовать такой набор значений .grid__item1 { grid-row-start: span 2; grid-column-start: span 2; элемент ведет себя предсказуемо, но если изменить grid-column-start на span 3 то .... Я пока точно не понимаю как это связанно, но продолжаю копать инфу
Фрілансер по життю
Рет қаралды 189 М.
Фрілансер по життю
Рет қаралды 175 М.
Фрілансер по життю
Рет қаралды 242 М.
Фрілансер по життю
Рет қаралды 659 М.
Диджитализируй!
Рет қаралды 23 М.
ВебКадеми | Юрий Ключевский
Рет қаралды 98 М.
Фрілансер по життю
Рет қаралды 370 М.