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

Поділитися
Вставка
  • Опубліковано 15 лис 2024

КОМЕНТАРІ • 187

  • @p.polunin
    @p.polunin 2 роки тому +16

    Полазил в интернете, почитал про тебя, какой у тебя был интересный путь становления. Я очень рад, что есть такие люди с завидным упорством. Ты вложился в это дело, теперь раздаешь другим. Мало таких, с большим сердцем!

  • @ЖекаКрылов-о5з
    @ЖекаКрылов-о5з 2 роки тому +24

    Жека спасибо большое, так качественно даже за деньги не делают, очень ценю тебя, лучший!

  • @ОлегСустов
    @ОлегСустов 2 роки тому +2

    думал что Grid, это очень очень темный лес, но после увиденного, начинаю в него влюбляться все больше и больше !!! как всегда , ОГРОМНОЕ СПАСИБИЩЕ за столь четкую и ясную информацию!

  • @shukonfadah5725
    @shukonfadah5725 2 роки тому +1

    все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!

  • @ОлегМарченко-ы2ь
    @ОлегМарченко-ы2ь 4 роки тому +58

    Спасибо огромное! Стабильно качественный и информативный урок!

  • @evrozah1
    @evrozah1 3 роки тому +7

    Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.

  • @timgluk
    @timgluk 3 роки тому +9

    Спасибо за информативный урок.

  • @annasahradyan9849
    @annasahradyan9849 3 роки тому +5

    Спасибо большое ,с вашей помощью делаю сайт для резюме ,обожаю Ваши слова ,вот бы и дети мои слушали Вас.

  • @ThevideOoLoadeR
    @ThevideOoLoadeR 3 роки тому +6

    Женя, спасибо за все твои уроки, пока что ты для меня - фаворит в эффективности донесения информации, просто не перестаю удивляться такому качеству, ещё и за бесплатно. Лучший.

  • @kristinaalex8025
    @kristinaalex8025 4 роки тому +20

    Суперские уроки! Спасибо большое!! Все понятно и доходчиво!

  • @CentnerGovna
    @CentnerGovna 2 роки тому +3

    Огромное спасибо! Очень информативно, профессионально, полезно, а самое главное, не скучно!

  • @Zosima-q4j
    @Zosima-q4j 3 роки тому +4

    Бесконечно благодарен! Просто, понятно и практично. Лучшие уроки!

  • @V4VFAloj7juAyQW
    @V4VFAloj7juAyQW 4 роки тому +5

    Большое спасибо. Очень полезно и наглядно. Стандартно наивысшее качество!

  • @АртемТкаченко-р7л
    @АртемТкаченко-р7л 4 роки тому +5

    Доступно, классно и понятно, очень хороший контент! Благодарю!

  • @КириллСергеевич-ч3ж

    Смотришь и наслаждаешься!

  • @IT-Svyatoslav
    @IT-Svyatoslav 4 роки тому +14

    Ураааа!!! Новый урок по Grid!!!
    Женя, спасибо! Люблю учить верстку по твоим урокам.

  • @СергійК-з5т
    @СергійК-з5т 2 роки тому

    Дуже Хороший урок... Величезне Вам "Дякую"...

  • @svetlanaandreeva8762
    @svetlanaandreeva8762 2 роки тому +1

    Спасибо большое!! Все понятно и доходчиво! Лучшие уроки!

  • @TheAiAm
    @TheAiAm 4 роки тому +6

    Очень доходчиво и наглядно))) спасибо!!!

  • @AntaresOneTwo
    @AntaresOneTwo 4 роки тому +15

    Круто! Жду следующую часть!!!

  • @old__gamer
    @old__gamer 4 роки тому +5

    Молодец ! Продолжай в том же духе. Уроки очень приятно смотреть.

  • @АртемДжусупов
    @АртемДжусупов 2 роки тому +1

    В очередной раз говорю тебе Спасибо за твои суперские уроки!!!

  • @onlytherareness
    @onlytherareness 4 роки тому +6

    супер уроки, очень доходчиво! спасибо большое! всех благ!

  • @artyomnazarov8518
    @artyomnazarov8518 3 роки тому +2

    Оказалось не так сложно. Спасибо!!!

  • @MxM_5835
    @MxM_5835 3 роки тому +3

    Жека ты как всегда на высоте! Спасибо за хорошее объяснение

  • @k4ch856
    @k4ch856 4 роки тому +3

    здравствуйте,Евгений.Как всегда понятно и качественно.Хотелось бы увидеть ещё видео про адаптив

    • @maxfatyanov7096
      @maxfatyanov7096 4 роки тому

      Уже было. ua-cam.com/video/XbnAKjjlgc4/v-deo.html

  • @ИгорьАксененко-б1м

    Женя, дуже дякую! Корисно та доступно!

  • @iamcarinn
    @iamcarinn 2 роки тому

    плейлисты по flex и grid просто золотые! огромное вам спасибо!

  • @kotiko_oks
    @kotiko_oks 4 роки тому +10

    посмотрел все выпуски🥰 и лайкнул ❤

  • @keks_o4162
    @keks_o4162 3 роки тому +1

    Оч крутой туториал!

  • @no_name_2mix
    @no_name_2mix 4 роки тому +4

    Спасибо) Ваши видео оч приятно смотреть.

  • @СветланаСанкевич-щ4н

    Ты лучший и останешься им! И спасибо, что освещаешь реальные события!

  • @ЕленаКозлова-э1ж
    @ЕленаКозлова-э1ж 3 роки тому

    Замечательное объяснение. Все четко и понятно!

  • @Xyjail
    @Xyjail Рік тому

    Преподавание шедеврально)
    Спасибо)

  • @danilbadretdinov2787
    @danilbadretdinov2787 2 роки тому +1

    На уровне!

  • @DashaG182
    @DashaG182 4 роки тому +4

    Женя, ты супер! Как всегда)

  • @Yupitrer
    @Yupitrer Рік тому

    Мощны... Тобто, потужний урок. Що треба!

  • @Faradenza-sb3mj
    @Faradenza-sb3mj Рік тому

    Лайк за очень познавательный контент

  • @VarlogST
    @VarlogST 3 роки тому

    Офигеть... так круто разжевать гриды. Это - нечто.

  • @ivangureev3036
    @ivangureev3036 2 роки тому

    "Вычисления weeds and high" - норм тема 🥸

  • @АкылбекБайзаков-н7ъ

    Спасибо, Жека!!!

  • @ПетроЖелев
    @ПетроЖелев 2 роки тому +1

    Чудове відео! Дякую!🙏

  • @bohdandudchenko939
    @bohdandudchenko939 3 роки тому +1

    Жека, огромное тебе спасибо!

  • @alshabanov
    @alshabanov 4 роки тому +3

    Спасибо за урок :))

  • @o_antushevich
    @o_antushevich 2 роки тому

    Спасибо за отличный урок!

  • @pro_massages
    @pro_massages 3 роки тому

    Женя спасибо тебе огромное!

  • @fallenstar358
    @fallenstar358 4 роки тому +3

    Посмотрел всё и это было круто!

  • @ivanryapolov7903
    @ivanryapolov7903 4 роки тому

    Збыл сказать СПАСИБО. Ты - лучший.

  • @ЮрийКотенев-х5м
    @ЮрийКотенев-х5м 4 роки тому +1

    Спасибо за гриды!👍

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 2 роки тому

    Как всегда - класс!

  • @aleksandrayavorskaya1523
    @aleksandrayavorskaya1523 3 роки тому

    !!! Спасибо тебе, Человек!!!

  • @dvsDesing
    @dvsDesing 3 роки тому

    Спасибо за туториал!

  • @dimapnzn725
    @dimapnzn725 3 роки тому

    Топовый урок, для новичка в верстке мало подробностей конечно, но всё понятно и можно самому разобраться в остальном)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому

      Там 4ре части про гриды, надеюсь информации достаточно

  • @alexbel5599
    @alexbel5599 4 роки тому +1

    Спасибо 🤘

  • @АндрейСереда-н8х
    @АндрейСереда-н8х 2 роки тому

    Молодчага!

  • @ВладОся-з7ь
    @ВладОся-з7ь 3 роки тому

    Просто нет слов все очень круто

  • @Dbond1979
    @Dbond1979 3 роки тому +1

    Жека Спасибо!!!

  • @AlinaEmv
    @AlinaEmv 2 роки тому

    Для таких полезных видео слишком мало лайков... непорядок!
    Ребята видимо хотят слушать песни Аллы Пугачевой под балконом и усиков на фотографиях🤣🤣
    Обожаю ваш канал с вашим юмором. Продолжайте в том же духе🔥🔥🔥

  • @alexandrminakov97
    @alexandrminakov97 2 роки тому

    Спасибо за ролик

  • @oleboz95
    @oleboz95 2 роки тому

    Гарний контент, дякую

  • @FradPR
    @FradPR Рік тому

    Дякую за урок!

  • @mrSturnn
    @mrSturnn 3 роки тому +12

    Много обучающих видео просмотрел, но только у Жеки качество на таком высоком уровне.

  • @GaZiZoViCh-l8n
    @GaZiZoViCh-l8n 4 роки тому +6

    Женя топ как всегда пересмотрю ещё раз что))), жду шпору

  • @VM_Dev_tv
    @VM_Dev_tv 4 роки тому +2

    ты крут.......

  • @РоманСергійовичНагаєвський

    Контент - СУПЕР! Слідуючи порадам Жеки, під час освоєння нового матеріалу, завжди себе себе запитую "А що , якщо?..." (Ось тут виникло запитання !) : "А що, якщо я хочу дублювати якийсь елемент грід-сітки? Відобразити його кілька разів ? Повторити у різних областях або ж просто не займатися Ctrl+C & Ctrl+V у html-файлі ? ", в Google поки ще не знайшов ))

  • @oleksandrradoshniuk7055
    @oleksandrradoshniuk7055 4 роки тому +1

    Спасибо)

  • @АлинаФарт
    @АлинаФарт 3 роки тому

    Спасибо! 👍✨

  • @наталіяклемишова
    @наталіяклемишова 4 роки тому +2

    Класс!👌

  • @PorohTech
    @PorohTech 4 роки тому

    Жду продолжение!!!!

  • @ВадимОрешков-щ8т
    @ВадимОрешков-щ8т 2 роки тому

    Привет Жека) немного запутал. Говоришь колонки, когда нужно говорить про линии сетки. Если бы не внимательно смотрел предыдущие уроки так бы и не понял о чём ты. На 04:00 говоришь, что стартует с 3-й колонки, хотя стартует с третей линии. Спасибо за уроки, ты лучший:3

  • @bosbos4888
    @bosbos4888 4 роки тому

    крутой туториал

  • @MaximVernigorov
    @MaximVernigorov 3 роки тому

    Лучший!

  • @Pros_tp
    @Pros_tp 4 роки тому +1

    Спасибо

  • @MegaTesei
    @MegaTesei 3 роки тому

    Записываю важные данные в блокнот по тем видео которые есть в курсе. Как Вы делали в начальных уроках курса, мне это помогает, так как не всегда удобно искать в браузере/закладках данные шпаргалки. Периодически, я читаю эти записи и вспоминаю пройденное. И, тут меня посетила идея, прекрасно бы было иметь методичку по данному курсу. В ней бы были собраны те данные из записей блокнота и указаны узкие места (типа, где не стоит применять процентные

  • @oleg_andrianov
    @oleg_andrianov 3 роки тому

    Жесть как круто!

  • @АрстанбекШаршенов-к4т

    thanks

  • @ДиасАбдолдаев-о4п
    @ДиасАбдолдаев-о4п 4 роки тому +4

    Здравствуйте!! Уроки просто топ))!! Спасибо) А как вы показываете верстку заказчику перед оплатой? Заранее спасибо))

  • @4ORESIGHT
    @4ORESIGHT 3 роки тому +1

    Женя, здравствуй! Подскажи пожалуйста, почему на 4:40 при задании растяжения по сетке на три колонки (grid-column-start: span 3;), у нас перестает работать свойство для растяжения по строкам (grid-row-start: span 2;)? Причем, простировав это дело у себя, я заметил, что такое поведение наблюдается, только если это у нас самый первый элемент в сетке.

  • @АндрейПотапов-ш9ц
    @АндрейПотапов-ш9ц 4 роки тому +1

    Уроки клас, спасибо. С каждым новым видео понимаю все меньше😁. Flexы были понятнее 🤔

    • @masterbiz100
      @masterbiz100 4 роки тому +1

      Просто гриды нужно больше практиковать. Простым просмотром уроков ты полного понимания не добьешься, пока сам не "поиграешься" с версткой. Если интересно - есть онлайновый игровой тренажер для практического освоения гридов cssgridgarden.com/#ru

    • @targarien57d86
      @targarien57d86 4 роки тому

      @@masterbiz100 крутой тренажор, а есть еще какие небудь тренажори на русском?

  • @АнастасияПрокофьева-и2й

    Топ контент

  • @velobarahlo
    @velobarahlo 3 роки тому

    спасибо!

  • @example6963
    @example6963 4 роки тому +5

    Привет Жека! А когда урок по swiper JS?

  • @violentiner
    @violentiner 4 роки тому +2

    Привет Евгеш, как всегда спасибо за инфу, очень достойно, ответь пожалуйсто на пару вопросов: когда планируеш закончить плейлист по гридам(хотябы примерно) и интересует как вообще этот грид по юзабилити, часто ли ты его используеш?можно ли обойтись флексами или есть ряд задач которые можно выполнить ТОЛЬКО прибегая к гридам?Или ты как бы вместе с нами его изучаеш и в реал лайфе не юзаеш?

  • @натальяхарченко-г7х

    Дякую!

  • @FastBimer
    @FastBimer 2 роки тому

    Дякую!)

  • @phoenixbeard8543
    @phoenixbeard8543 Рік тому

    Файно))

  • @bigthinks2290
    @bigthinks2290 4 роки тому +1

    Пушка!

  • @Dmytro-DIY
    @Dmytro-DIY 2 роки тому

    Let`s go!

  • @ВладимирСолодовник-ы2о

    Привет Жека. Есть просьба - (при последующих записях) если есть возможность, выдели курсор мышки цветным бекграундом, чтоб было понятно где сейчас курсор на экране. Спасибо

  • @ГригорийСитёв
    @ГригорийСитёв 4 роки тому +3

    Как всегда the best !!!
    А я через grid-area создаю разметку. Это не ошибка с моей стороны?
    .item-header {
    grid-area: 1/1/2/5;
    }

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +1

      Я вот как раз об этом и не говорил, так как слишком запутанно. Лучше сначала проработать более простые записи

    • @ГригорийСитёв
      @ГригорийСитёв 4 роки тому

      @@FreelancerLifeStyle благодарю

  • @ПавелРодионов-щ6е
    @ПавелРодионов-щ6е 2 роки тому

    Спасибо за материал. Подскажите, если нужно удалить скажем второй блок грида, что бы затем вся сетка схлопнулась как это сделать? Сделал пока так, удаляемому блоку присвоил свойства order с максимальным значением (число больше чем у вас в сетки блоков), а затем уничтожаю блок. Может есть более правильный вариант? Обновление сетки грида? Спасибо.

  • @НиколайПанкратов-к8о

    запиши небольшое видео как пользоваться Devtools =)

  • @igorlitvintsev2427
    @igorlitvintsev2427 3 роки тому +1

    Спасибо, классный урок)
    Есть вопрос, не пойму, почему на минуте 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
      @AndreiVelotourist 3 роки тому +1

      Это все связано с явно заданной сеткой:
      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 то ....
      Я пока точно не понимаю как это связанно, но продолжаю копать инфу

  • @ВикторКалмыков-ф5у
    @ВикторКалмыков-ф5у 3 місяці тому

    Мне интересно, я не один ещё кто дошёл до этого момента ? )) Всем привет кто жив! Я с 2024 года.

  • @SisgsbKdhdgd
    @SisgsbKdhdgd Рік тому

    Zoʻr

  • @Salykin-pro
    @Salykin-pro 3 роки тому +1

    🔥👍🔥

  • @Александрндреевич
    @Александрндреевич 4 роки тому +1

    Привет! Можно ли сочетать grid и flex внутри одного проекта? Или это не имеет смысла?

  • @sharpPunch
    @sharpPunch 4 роки тому +2

    Привет! Как добавить пустую строку между уже существующими с контентом

    • @DmitriyWDL
      @DmitriyWDL Рік тому

      Сделать полосу-ячейку на всю ширину сетки? :) Или вы не о том?

  • @Anatoliy_Tabakov
    @Anatoliy_Tabakov 3 роки тому

    Давно не смотрел плейлист, решил допройти. Поэтому надеюсь на Вашу помощь, Жека, а то недопонял. Вы говорили, что если для элемента сетки добавить margin, он не будет схлопываться. Не совсем просто понял, в силу того, что давно не практиковался, что означает схлопывание?
    Заранее спасибо за ответ!

    • @bekermamatov7049
      @bekermamatov7049 3 роки тому +1

      это когда в двух соседних марджинах, тот что побольше, съедает того что по меньше. и в итоге два марджина не складываются, а остается только больший марджин. меньший тоже остается, но внутри большого

  • @MegaTesei
    @MegaTesei 3 роки тому

    Молодец, что снизил скорость повествования. Контент сложный пересматривать приходится по нескольку раз. Догадываюсь, что гриды приходят на замену таблицам.