15. CSS Grid Layout. Грид-сетка. Гайд по гридам в CSS

Поделиться
HTML-код
  • Опубликовано: 8 фев 2025

Комментарии • 62

  • @mushroom2267
    @mushroom2267 Год назад +23

    Чувак, ты лучший и твой канал просто находка! Спасибо за все твои видео, сам сейчас учусь фронтенд-разработке и выписываю весь полезный материал в заметки, у тебя прям всё что нужно уже собрано. Надеюсь будут видосы и с реактом когда-нибудь или просто с любыми проектами.

    • @AlexanderPuhckov
      @AlexanderPuhckov 7 месяцев назад +1

      О ,и я учусь!😇 Александр, и правда находка согласен!!!

  • @darkmatiz
    @darkmatiz Год назад +6

    гуглил как центрировать див в очередной раз, наткнулся на ваш прекрасный канал, советую теперь всем начинающим

  • @colodatwin3102
    @colodatwin3102 Год назад +16

    Спасибо большое, хоть я уже на этапе изучения JS , но каждый ролик смотрю, так как в каждом ролике вы показываете различные тонкости, о которых никто не говорит. Например, из этого урока я узнал , про точку, про то как включить грид-сетку в девтулс, про то что repeat можно указывать несколько раз, и ещё про place-items) короче очень информативно и это всего за 14 минут)

  • @PROBOYNIC
    @PROBOYNIC Год назад +5

    Видео топ!
    Спасибо за работу!

  • @kagamisuitsu
    @kagamisuitsu 9 месяцев назад +4

    Я тебе невероятно благодарен!
    Полгода в универе нас не обучали веб-разработке, а просто требовали выполнения лаб. Например, скопировать сайт bikeetta.
    Я столько намучился с флексами, я их толком не понимал, но всё выполнил.
    Сейчас, благодаря твоему уроку я понял гриды и это потрясающе. Знал бы всё это несколько месяцев назад - не пришлось бы столько мучаться.
    Спасибо тебе огромное за твои уроки!

  • @love-and-grace
    @love-and-grace 24 дня назад +1

    Спасибо, отличный channel у вас!)

  • @sv1net584
    @sv1net584 4 месяца назад +2

    Лучший канал по хтмл и цсс на ру ютюбе. У меня 4 года опыта ком. разработки, но при этом много полезного узнал о верстке.

  • @smotritelyoutube
    @smotritelyoutube Год назад +2

    Пушка!!! Лайк, коммент, подписка!!!

  • @ДорофеевСергей-г8р
    @ДорофеевСергей-г8р Месяц назад

    Огромное спасибо за интересно изложенный материал!

  • @АлександрБекач
    @АлександрБекач 6 месяцев назад +4

    В очередной раз поражаюсь, как Саша умело и доходчиво преподносит информацию. Для меня тема оказалось немного труднее, как и флексы. Вроде бы смотришь видео, понимаешь, о чём идёт речь, но в голове каша. 😅 Нужно будет обязательно возвращаться к этим темам и пересматривать их.
    Спасибо за урок!

  • @Ivanfwit
    @Ivanfwit Год назад +3

    отличное видео, спасибо!) намного информативнее других ресурсов

  • @nya-nyafind2754
    @nya-nyafind2754 10 месяцев назад +2

    Александр ты лучший! Огромное спасибо, информативно, коротко, ясно все на высшем уровне. Как на земле мог родится такой прекрасный человек!

  • @Husan203
    @Husan203 Год назад +3

    Ролик ТОП!!!

  • @OnlyProg-dm9gc
    @OnlyProg-dm9gc 7 месяцев назад +1

    Что ж, надеюсь на практике отточить все эти прекрасные свойства, тогда я их перестану забывать 😅 Спасибо за урок, буду к нему возвращаться! ❤

  • @КонстантинКашапов
    @КонстантинКашапов 5 месяцев назад +1

    Класс и тут игру добавил, по ней удобнее учиться) Спасибо!

  • @yanchello
    @yanchello 3 месяца назад +1

    Просто СУПЕР!
    Находка для начинающего👍🏻👍🏻👍🏻

  • @artemoganian3597
    @artemoganian3597 2 месяца назад +1

    Спасибо за отличное обучающее видео!

  • @31danmaster31
    @31danmaster31 Год назад +3

    Как всегда всё чётко!

  • @Ihaveaverygoodfuture
    @Ihaveaverygoodfuture 6 месяцев назад +3

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

    • @AleksanderLamkov
      @AleksanderLamkov  6 месяцев назад +1

      В начале из темы гридов нужно понять свойство grid-template-columns в его базовом синтаксисе, а именно - как работает repeat() и что такое 1fr. Остальное - не так важно.

  • @НадеждаБаранова-щ2я
    @НадеждаБаранова-щ2я 5 месяцев назад +1

    🔥🔥🔥🔥 очень крутое видео) понятные примеры. спасибо)

  • @dmitryvertoprakhov5469
    @dmitryvertoprakhov5469 2 месяца назад

    Красавчик

  • @Sylar7773
    @Sylar7773 Год назад +3

    Топчик, спасибо

  • @makeeviv
    @makeeviv 3 месяца назад +1

    Спасибо, полезно!

  • @akylbekbaizakov
    @akylbekbaizakov 9 месяцев назад +1

    Спасибо за урок!

  • @Tehnokrott
    @Tehnokrott 5 месяцев назад +2

    Саша - the best

  • @YouFourtt
    @YouFourtt 4 месяца назад +1

    Смотрю на скорости 0.25, так лучше усваивается

  • @VitaliaTereschenko
    @VitaliaTereschenko 6 месяцев назад +1

    Саша, спасибо большое за твой образовательный канал. Очень доступно и сжато объясняешь. По факту просто концентрат всего самого важного на твоем канале. Я учусь на курсе и по твоим материалам одновременно и твои материалы актуальнее.
    Но пожалуйста, верни обратно спокойную музыку для тревожных людей на фон. С ней было проще долго сидеть и учиться. Это пожелание к будущим курсам, если это не проблема!
    И подскажи пожалуйста, планируется ли и когда планируется курс по реакт?

    • @AleksanderLamkov
      @AleksanderLamkov  6 месяцев назад +2

      Спасибо за обратную связь!
      По поводу музыки - увы, было много жалоб на неё, поэтому решил убрать и с тех пор не добавлял. Как я понял, это мешает людям, которые замедляют или ускоряют видео (таких, оказывается, много), так же это мешает людям, которые ставят собственную музыку на фон.
      От себя могу лишь порекомендовать на яндекс музыке или спотифае фоном включать плейлист по запросу «ambient».
      По поводу курса по реакт - планирую, но пока никаких даже примерных сроков нет. Сначала нужно закончить курс по JS и несколько мастер-классов.

    • @alexdexx21
      @alexdexx21 Месяц назад

      @@AleksanderLamkov дело не столько в ускорении, сколько в том, что музыка, когда материал - "вода", развлекает, а когда "концентрат", отвлекает. плиз не включай, пусть сами запускают музло)

  • @AlexAlex-bp9il
    @AlexAlex-bp9il 11 месяцев назад +2

    Н?№"я не понял., но очень интересно !

  • @Kino_moment_official
    @Kino_moment_official Месяц назад +1

    если мне щас сложно это все запомнить то хорошая идея пропустить этот урок и вернутся когда оно понадобится и тогда выучивать?

    • @AleksanderLamkov
      @AleksanderLamkov  Месяц назад +1

      Не скажу, что «хорошая», но приемлемая. Когда на практике столкнешься с гридами, возвращайся к уроку. Тебе по этой теме достаточно будет разобраться со связкой display grid + grid-template-column + gap.

  • @liza_beg
    @liza_beg Год назад +2

    У меня на практике криво получилось в свойство place-items объединить justify-content и align-items. Как я поняла place-items - это шорткат для justify-items и align-items, то есть их выравнивание содержимого внутри грид-ячейки. А для выравнивания самих ячеек и для объединения justify-content и align-content подойдет - content. И с флексами, так же получается. Подскажите, я права или что то не так поняла?)

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад

      Привет! Да, тут я ошибся, place-items это шорткат для justify-items и align-items. Если при просмотре свойств в DevTools во вкладке Styles раскрыть place-items (нажать на стрелку слева от значения свойства), то там как раз будут те свойства, о которых вы написали.
      Спасибо, что поправили! В будущей версии курса учту эти моменты обязательно :)

    • @liza_beg
      @liza_beg Год назад +1

      @@AleksanderLamkov Спасибо за ответ:)
      Нашла в DevTools, класс, спасибо, не знала о таком.

  • @ДимаКоковин-и8е
    @ДимаКоковин-и8е 2 месяца назад

    Здравствуйте, скажите, пожалуйста, почему "%" Абсолютная величина? 2:57
    Процент, ведь, является относительной величиной.

    • @AleksanderLamkov
      @AleksanderLamkov  2 месяца назад

      Оговорился. Действительно, относительная.

    • @ДимаКоковин-и8е
      @ДимаКоковин-и8е 2 месяца назад

      @AleksanderLamkov здравствуйте, хорошо, спасибо!

  • @phuntom777
    @phuntom777 5 месяцев назад +1

    Александр, огромное спасибо за ваше познавательное объяснение! Подскажите, правильно ли я понимаю, что при объяснении свойства row-gap, column-gap и gap вы оговорились? Прозвучало, что свойство row-gap задаст промежуток между элементами по вертикали, но на видео отображается промежуток по горизонтали. Далее вы говорите, что column-gap задаст промежуток по горизонтали, но отображается промежуток по вертикали.

    • @AleksanderLamkov
      @AleksanderLamkov  5 месяцев назад +1

      Да, оговорился в этом моменте.

    • @phuntom777
      @phuntom777 5 месяцев назад +1

      ​@@AleksanderLamkov спасибо за ответ, я вообще поражаюсь, как вы в таком потоке информации так быстро можете сориентироваться) Подскажите, пожалуйста, что вы думаете насчёт технологии модульной css сетки? Как я понимаю, на ней верстали до появления css grid? Насколько модульные сетки актуальны в нынешнее время в веб-разработке, стоит ли уделить время тщательному изучению их построения или они уже считаются устаревшей технологией?

    • @AleksanderLamkov
      @AleksanderLamkov  5 месяцев назад +1

      Я считаю, что изучать это не нужно. Ну если на работе столкнешься с этими классами "col-8-xm" из бутстрапа и подобных библиотек, то сориентируешься на месте, прочитав документацию. Специально такое изучать не стоит. В новых проектах это уже почти никто не использует.

    • @phuntom777
      @phuntom777 5 месяцев назад +1

      ​@@AleksanderLamkovбольшое спасибо за ответ!

  • @ani_galich
    @ani_galich 10 месяцев назад

    Добрый день! Подскажите, не увидела свойства justify-items (Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.) Оно не используется сейчас на практике?

    • @AleksanderLamkov
      @AleksanderLamkov  10 месяцев назад +1

      Добрый! Я использую его редко и, честно говоря, то ли забыл, то ли специально не включил в курс как раз по причине, что мне лично не пригодилось свойство ни разу за сотни сверстанных макетов. Но знать об этом свойстве будет не лишним. Обязательно включу об этом информацию в следующей версии курса, спасибо за эту информацию!

  • @ivankorsun6568
    @ivankorsun6568 8 месяцев назад +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 месяцев назад

      Да ты не первый, кто говорит мне про мою быструю скорость речи. Есть такая проблема. Работаю над этим.

  • @windcrack8404
    @windcrack8404 3 дня назад

    Почему никто не говорит о замечательном свойстве grid-auto-flow: dense; ?

    • @AleksanderLamkov
      @AleksanderLamkov  3 дня назад

      Забавное совпадение. Буквально пару дней назад писал сценарий для шортса на эту тему :)

    • @windcrack8404
      @windcrack8404 3 дня назад

      @@AleksanderLamkov Круто :). Я просто сколько видео не смотрел по гридам, никто не говорил про него :(. Жду шортс :).

  • @СветланаГруздева-л7ю
    @СветланаГруздева-л7ю 9 месяцев назад

    Александр, а если делать сайдбар и основной контент на гридах, то при изменении контента (раскрывающееся меню) содержимое контента начинает тоже увеличиваться. В контенте тоже грид-элементы и между ними увеличивается расстояние по вертикали. Как с этим бороться?

    • @AleksanderLamkov
      @AleksanderLamkov  9 месяцев назад

      Привет! Не совсем понимаю проблему. Раскрывающееся меню обычно делают через position fixed, а не как часть грид-сетки.

  • @VENTA2296
    @VENTA2296 6 месяцев назад +5

    очень много инфы! и с первого раза не все понятно! такой объем за раз не то что не освоить, а даже не запомнить!

    • @AleksanderLamkov
      @AleksanderLamkov  6 месяцев назад

      Попробуй изучить несколько источников по этой теме. Гриды - одна из самых сложных концепций CSS, многим не дается с первого раза.

    • @ВниманиеработаютБратья-и8ф
      @ВниманиеработаютБратья-и8ф 6 месяцев назад

      Мне хорошо помогла игра в конце ролика я так и flex изучил

    • @SLW0226
      @SLW0226 5 месяцев назад

      А как же конспектирование? А еще помогает параллельная практика. Запоминается лучше, когда сам делаешь)

    • @denwolf9159
      @denwolf9159 5 месяцев назад

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

  • @svitboomer8840
    @svitboomer8840 Год назад

    Постригся что ли?