CSS Grid Layout. Свойства определения сетки grid-template и другие

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

КОМЕНТАРІ • 300

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

    🤟 Весь плейлист CSS Grid Layout ua-cam.com/video/GV92IdMGFfA/v-deo.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

  • @Hrusst
    @Hrusst 4 роки тому +24

    Смотрю уроки про grid CSS на большом экране телека, изображение чёткое, разрешение соответствует... Качество изображение стало лучше, спасибо за твои уроки и твой труд!

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

    Вы делайте меня счастливым , у вас талант объяснения , спасибо вам большое за ваши старания .

  • @alenachuyankova
    @alenachuyankova 2 роки тому +17

    Я начинала с ваших уроков свои попытки войти в айти) Я продолжаю учиться, но вы как были одним из лучших, так и остаетесь. Вам давно пора школу открывать! У меня к вам большая просьба с точки зрения новичка, который по крупицам собирает в резюме все что угодно, чтобы продемонстрировать "Я читал, слушал, вот там и тут". Т.е. просьба называть курсы на Ютубе таким образом, чтобы их можно было указывать в резюме. К примеру, курсы на Юдеми или Орейли - это тот же Ютуб по сути, но на другой площадке.
    Ваш уровень преподавания гораздо выше, чем у большинства людей, которые берут за это деньги! Качество контента, да и все вообще на высоте. Вы делаете огромную работу. Просьба только как-то это все оформить, чтобы на вас можно было ссылаться. Оно возможно и вам полезно будет с точки зрения, чтобы вас упоминали чаще. Большое спасибо!

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

    Большое спасибо за этот урок! Я вас в прошлых критиковал, всё никак не доходило до конца, а тут полностью дошло. Долго пытался разобраться с гридами и всё не получалось. Ради интереса переделал ваш двухколоночный макет в трехколоночный плюс футер, и всё это оказалось легко и просто. Использование grid-template даже проще в понимании логики процесса за grid-template-rows + grid-template-columns + grid-template-areas, хотя бы тем, что строки ты прописываешь каждую на отдельной строке, прям как эти строки будут отображаться в макете, а не в ряд как в grid-template-rows, а колонки в одну строку, что тоже удобно, так как создается виртуальное представление колонок.

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

    Удивляюсь, как сложный материал легко заходит при правильной подаче!) Спасибо!!!

  • @polarbearprogramming
    @polarbearprogramming Рік тому +1

    благодарю за качественный контент, которые вы нам предоставили сенсай :)

  • @Atelier155
    @Atelier155 4 роки тому +18

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

  • @АндрейКолодица
    @АндрейКолодица 3 роки тому +2

    самые лучшие и главное понятные объяснения о верстке, без вас я бы еще дольше по времени разбирался. Евгений вы лучший, такое чувство что за работу взялся самый настоящий перфекционист, который понимает что надо для новичка.
    но у меня еще предложение: как вам идея сделать разбор об инспекторе браузеров? об их фишках и полезностях.
    так же хотелось бы чтобы еще были макеты для фигмы, поскольку лайфхак с аккаунтами для авакода не работает, по-крайней мере у меня((
    но в любом случае, мое тебе почтение и уважение евгений

  • @-Forever-Young-
    @-Forever-Young- 3 роки тому +4

    Спасибо, Жека! Учусь по твоим урокам)

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

    Учусь уже месяц, Женя , твоя фоновая музыка у меня практически постоянно в голове))))Спасибо тебе за уроки, но кукуха реально едет от инфы и музыки)

  • @АртемКа-в3к8й
    @АртемКа-в3к8й 4 роки тому +2

    Когда наступил момент имена областей, я реально обалдел, ты крут!)

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

    Вот я и взялась изучать гриды, под Вашим руководством. Все понятно, все четко расписано. Спасибо огромное за Ваши уроки.

  • @Misha-knz
    @Misha-knz 6 місяців тому +1

    Відео супер, дякую!!!

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

    Благодарю за ваш труд!

  • @woodDacha
    @woodDacha 3 роки тому +109

    лучший канал по верстке , что я знаю. Некоторые видео пересматривал раза по 3-4 когда надо освежить в памяти. Кратко понятно и доходчиво!

  • @ДмитрийКузьмин-ш2с
    @ДмитрийКузьмин-ш2с 4 роки тому +9

    Жека, благодарю!! Очередная годнота.

  • @Anatoli-bq1pe
    @Anatoli-bq1pe Рік тому +1

    Как всегда отличная подача материала)

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

    Хорошо, отлично, замечательно :)

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

    Спасибо за урок, искренне благодарен. Не представляю сколько бы времени потратил на изучение данной темы без ютуба и собственно твоего канала!))

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

    Знаком с grid, но после этого видео узнал новые свойства, grid контейнера, Круто!👍

  • @ГеоргийЦветухин
    @ГеоргийЦветухин 4 роки тому +1

    Ух, наконец-то решил изучить гриды и сразу же к тебе на канал! Все круто объясняешь, с примерами! Благодарю!

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

    Евгений, МЕГА круто!!!! Спасибо!!!!

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

    Спасибо за такой прекрасный видеоурок! Уже давно являюсь зрителем вашего канала, и в восторге от каждого видеоролика! Продолжайте в том же духе, у вас талант преподавателя.

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

    Красавчик! Все подробно доступно.

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

    Пишу немного backend на фреймворках. Решил вот сделать свою верстку чтобы применить как шаблон темы и по ходу я застрял на Вашем канале!:))) Очень впечатляет! Спасибо за Ваш труд. Однозначно лайк!

  • @qexly512
    @qexly512 3 роки тому +8

    "Но и это еще не все!" :)

  • @Dark-jk8mq
    @Dark-jk8mq 4 роки тому +11

    красавчик, продолжай в том же духе!

  • @sailoks8411
    @sailoks8411 4 роки тому +8

    Ураа! Спасибо, вы лучший!

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

    Спасибо за всё)))

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

    Твои уроки самые лучшие, спасибо тебе огромное!!!

  • @RohanSan-nh1ig
    @RohanSan-nh1ig 3 роки тому +2

    Огромная благодарность за данный контент и правда лучший канал для обучения из тех что знаю )

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

    Просто получаю интеллектуальное наслаждение))

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

    Ахренеть какая крутая штука эти гриды! Как досадно что я не научился этому раньше(

  • @JesseJames-mh5kb
    @JesseJames-mh5kb 4 роки тому +4

    Давай Жека топи! Лайк не вглядываясь

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

    Класcная штучка этот Grid Layout! И, да, красивые фотки у фонтана!

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

    Шикарно! Прошел на FreeCodeCamp сейчас блок на эту тему и не особо понял. А тут посмотрел, и как будто бы понял). Спасибо большущее!

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

    Спасибо за помощь!

  • @BAS-64
    @BAS-64 3 роки тому +2

    У вас талант к преподаванию.

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

    Спасибо большое за полезный урок!

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

    Спасибо! Очень нужный материал ! Ты лучший

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

    Дякую! Все зрозуміло.

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

    Все подробно доступно

  • @ОлександрЯківець-ь2и

    Супер, не перестаю вчитись по твоїм відео, ти перевернув моє уявлення про CSS!

  • @НиколайКомаров-ъ4ъ
    @НиколайКомаров-ъ4ъ 4 роки тому +1

    Ваши видео очень познавательные и интересные!
    Спасибо огромное за Ваш курс!
    Вы единственный человек которого я видел на площадке youtube, который очень просто и доходчиво посвящает в web разработку))

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

    господи, кто может ставить дизы Жеке? это же прекрасный контент!

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

    Большое спасибо за ваши уроки

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

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

  • @ЯнаПронько-ы7ъ
    @ЯнаПронько-ы7ъ 3 роки тому

    Спасибо, смотрим дальше)

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

    Спасибо большое! Видео помогло решить мою задачу)

  • @letsgo3184
    @letsgo3184 4 роки тому +25

    Жек, у меня вопрос. Ты когда-нибудь проваливал заказы на фрилансе? Просто интересно.

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

      Непомню, бывало отказывался. Но так что бы завалить сроки или просто не сделать небыло

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

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

  • @mexvision-3556
    @mexvision-3556 3 роки тому +6

    Хотел бы уточнить по поводу единиц fr. Fr - фрагмент. Например (1fr 2fr 1fr), означает что грид разбивается на 4 фрагмента (сумма всех фрагментов), первая ячейка сетки занимает 1 из 4 фрагментов, вторая занимает 2 из 4 фрагментов, третья занимает 1 из 4 фрагментов. Все фрагменты одинаковые. Это объяснение мне кажется более понятным.

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

    Учусь в Скилл боксе, могу сказать очень много хорошего про эту школу, но ТАК круто можете объяснять какую-то тему только Вы! Спасибо, Женя)
    P.S.: Один маленький момент, areas произносится, как Эриас (ударение на Э) :)

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

    вы как всегда прекрасны! Прям солнышко, сияете!)

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

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

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

    Клас! Спасибо!!)

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

    Великолепно!

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

    ты супер, чел!

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

    Сразу лайк :))

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

    омг где все те люди которые кричали про "где гриды??" как и с флексами очень круто все понятно

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

      Спасибо! Все там же те кто кричит когда JS )))

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

    Очень хорошо объяснил. Спасибо!

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

    Мой 300-й лайк! Не последний! Отличное видео!

  • @ЕкатеринаБерезовская-ч9с

    Так много интересного , спасибо)

  • @user-pk5wr4yg3c
    @user-pk5wr4yg3c 4 роки тому +1

    Оставь пожалуйста под видео материалы с уроками, хочется руками подвигать потрогать )

  • @НеляНабиева-ф2р
    @НеляНабиева-ф2р 2 роки тому

    Вы супер)

  • @МихаилЗалозный-у4ч

    Євген дуже дякую за вашу працю ❗Навчаюсь з задоволенням, дуже гарно викладаєте матеріал... Сподіваюсь що в мене все вдасться 👍🤝👌❗

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

    жду в конце верстки на gridax)

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

    Это просто пушка! Спасибо!)

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

    Спасибо! 👍✨

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

    Спасибо, очень классно смотреть, все очень доступно! жду с нетерпением продолжения! Есть один вопрос: как насчет кроссбраузерности? Ты о ней пока не говоришь, но грид ведь капризничает на сафари например, может ты бы этих тем тоже касался сразу?

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

    Дякую за неймовірне відео, завжди сприймається легко і доступно

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

    Спасибо, Сенсей!

  • @ИгорьБражный
    @ИгорьБражный 2 роки тому

    Это реально бомбовый урок, впечатлен свойствами сетки.

  • @АлександрА-ц6д9й
    @АлександрА-ц6д9й 3 роки тому

    Спасибо!

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

    Лучший!

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

    Спасибо! Лучшее пояснение, которое нашел. Все по полочкам!

  • @АнтонОсташов-ж6ъ
    @АнтонОсташов-ж6ъ 4 роки тому +3

    Привет, когда интернет магазин, продолжение?

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

    Большое спасибо!)

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

    Очень интересное свойство. Очень доступно преподнесено. Пытаюсь вообразить все возможные варианты применения данного свойства... с нетерпением жду практики)

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

    Спасибо

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

    Пройдя твой плейлист возможно начать выполнять заказы на фрилансе?

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

    Только узнал про гриды, а уже появляется видео по ним. Удобно, спасибо!
    Что лучше разобрать новичку? Освоить media запросы + css grid или же bootstrap?

  • @Астролайф-э9ю
    @Астролайф-э9ю Рік тому

    Кращий!

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

    Звук тихий. В остальном - класс!

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

      Хм, постараюсь исправить

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

      @@FreelancerLifeStyle да, звук тихий, звук в плане твой голос когда верстаешь, во вступлении и в конце всё норм. видимо надо уровень громкости чуть подтянуть

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

    спасибо за видео, оч помог!

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

    Nice good

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

    Все супер. Как всегда РЕСПЕКТ И УВАЖУХА. ТОлько одного не понял, Какое преимущестрво GRID перед FLEX в сегоднешней адаптивной верстке? Да на больших экранах можно выстроить интересную структуру на GRID. GRID сжимаемся, но не перестраивается под размер экрана. Смысл тогода видеть сильно уменьшенную версию сайта на GRID на мобильных экранах???

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

    Выпусти пожалуйста ролик по шаблонизатору Twig. Классная штука же. Я бы с удовольствием посмотрел

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

    Отлично! Как всегда! Спасибо большое!

  • @РоманВолков-д9щ
    @РоманВолков-д9щ 3 роки тому

    Получается про можно забыть ?

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

    например я не знаю кол-во строк, ну например интернет магазин и сколько там будет товаров хз. и нужно что бы они не по контенту задавались, а были одинаковы grid-auto-rows заменяет в таком случае grid-template-rows

  • @ФилиппКрячко
    @ФилиппКрячко 3 роки тому

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

  • @ИльяПрохоров-б4п
    @ИльяПрохоров-б4п 2 роки тому +1

    Что-то я никак не могу подружится с гридами, два раза все курсы пересматривал ну что-то тяжело даётся.

  • @lub8777
    @lub8777 5 місяців тому

    Вітаю, Євгене підкажуть будь ласка, а чи є код CSS спочатку, а то я тільки position: relative бачу і все що під ним. Дякую

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

    Женя говорят щас при верстке grid не понадобится правда?

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

    Евгений, дайте пожалуйста совет, как начальному веб разработчику, что лучше сперва выучить, фреймворк bootstrap или лучше grid, что лучше изучить первым, и нужно вообще изучать эти две технологии вместе, или лучше выучить что-то одно.

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

      Бутстрап содержит в себе и грид и флекс и все остальное. Это просто набор готовых решений.
      Я советую учиться верстать без него.

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

      @@FreelancerLifeStyle Большое спасибо, за совет.

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

    В процессе изучения и конспектирования материалов урока возник вопрос Жеке:
    А на практике применяется ли одностолбиковое решение grid-auto-column, если да, то в каких случаях?

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

    Приветствую. А где можно бит найти, который в конце выпусков играет?

  • @fobiya-d9b
    @fobiya-d9b 2 роки тому +1

    Объясните плиз, зачем вообще нужен grid? Ну для чего эта сетка, если можно и так по макету все раскидать...