CSS Grid - верстка будущего

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

КОМЕНТАРІ • 111

  • @mikhailbakhtin3916
    @mikhailbakhtin3916 4 роки тому +37

    Пишу из будущего, мы все еще ждем лендос на гридах))

    • @vadymprokopchuk
      @vadymprokopchuk  4 роки тому +11

      хорошо, что напомнил) как все совпало... сегодня об этом думал

    • @Владислав-б7ф4я
      @Владислав-б7ф4я 3 роки тому +7

      @@vadymprokopchuk А сегодня?

    • @НифталиевВиктор
      @НифталиевВиктор 3 роки тому +3

      @@vadymprokopchuk а сегодня? :D

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

      и все же)

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

      @@vadymprokopchuk Вот сейчас самое время, я как раз начал учить гриды

  • @ProfessoRGM
    @ProfessoRGM 5 років тому +15

    Вау! Впечатлен, одно из лучших видио о гридах. Спасибо!

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому

      Круто, я рад что вам понравилось)

  • @ШепелевЕвгений
    @ШепелевЕвгений 5 років тому +14

    Спасибо за труд! Ждем полноценную верстку на гридах)

  • @yizhak3092
    @yizhak3092 5 років тому +4

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

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому

      Спасибо) успехов в изучении!

    • @yizhak3092
      @yizhak3092 5 років тому

      @@vadymprokopchuk Спасибо. Можно вопрос. Не мог сверстать часть страницы и обратился к товарищу который тоже верстает, он порекомендовал пользоваться фреймворками аля бутстрап, но я пока чисто на html и css пишу руками. Стоит прислушаться или всё же начать с чистого листа?

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому +1

      @@yizhak3092 момент очень тонкий) и нужно и нет) но в любом случае вам нужно научиться верстать на чистом html и css

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому

      Из бутстрапа, в основном нужна только сетка, но с появлением флексов надобность в ней сильно уменьшилась

  • @micaelkhamardiuk5819
    @micaelkhamardiuk5819 5 років тому +5

    Лучший канал о веб разработке :)

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

    В 2021 видосик заходит на ура!!!Спасибо как всегда на высоте!

  • @КираМартынова-э4в
    @КираМартынова-э4в 2 роки тому

    Очень доступно обьяснили. Пригодится в работе.

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

    Большое спасибо автору за подробный урок по Grid CSS

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

    Вместо 5 колонок и 6 строк достаточно создать 3 колонки и 4 строки. Для колонок задать grid-template-columns: 2fr 1fr 2fr, а для строк - grid-template-rows: 2fr 1fr 1fr 2fr. А стили для ячеек будут такие
    .item:nth-child(2),
    .item:nth-child(3),
    .item:nth-child(5) {
    grid-row: span 2;
    }
    .item:nth-child(2),
    .item:nth-child(6) {
    grid-column: span 2;
    }

  • @вассявассин-ч3ц

    Хорошо😊Дядя Вася доволен!

  • @appleipad9226
    @appleipad9226 5 років тому +11

    Спасибо за уроки 👍🏿

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

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

  • @user-natyi
    @user-natyi 2 роки тому

    Вадик, красавчик, класссссно обьясняет

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 5 років тому

    Сколько же нового узнал за этот урок.. Просто огонь!

  • @АртемРубцов-н2э
    @АртемРубцов-н2э 5 років тому +4

    Очень интересно, лайк!) Ждем верстки по гридам))

  • @Николай-ф3ч3д
    @Николай-ф3ч3д 5 років тому +1

    Cпасибо за видео. С нетерпением жду от Вас видео верстки на гридах :)

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

    Ждем видос на Grid!:)

  • @HusterliPlay
    @HusterliPlay 5 років тому +1

    Доходчиво и понятно. Спасибо за проделанную работу. Вёрстку лендинга на гридах в студию

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

    спасибо за такой прекрасный урок, все как я хотел просто великолепно!

  • @РостиславДідик-й2ь
    @РостиславДідик-й2ь 5 років тому +9

    спасибо, очень интересно

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

    Какой же ты красавчик! Я вчера весь день с ними долбался. Ща все понял) Спасибище)

  • @ЛеонидПятибратов-э7ц
    @ЛеонидПятибратов-э7ц 5 років тому +1

    Спасибо за науку, теперь сделаю страничку на гриде.

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

    Мы всё ещё ждем макет на гридах) прошел год))))))) спасибо братишка )

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

    Спасибо!Очень интересно!Реально хочется посмотреть вёрстку целого сайта на гридах!Ждём!

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

    Супер Гайд! Спасибо!

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 5 років тому +1

    Очень в тему! Спасибо, что держите в курсе новинок-тенденций! Однозначно лайк! =)

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

    Видео - топ! Спасибо)

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

    Спасибо

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

    Вадим крутяк конечно но блин звук ... выкрутил на максимум колонки в ПК чтобы услышать твое повествование. Было бы круто обновить видос ☝

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

    Спасибо, очень познавательное видео.

  • @asekabtw
    @asekabtw 5 років тому

    Очень полезные видео-уроки. Спасибо огромное!! Перед вашими видео всегда ставлю лайк наперед, так как знаю, что все будет качественно) Было бы круто, если сделаете верстку на гридах.

  • @kostasancez2358
    @kostasancez2358 5 років тому +2

    Спасибо, подписчики волеизъявляют, сайт на гридах хотим

  • @danylopozniakov3862
    @danylopozniakov3862 5 років тому +2

    Видос классный! Запили пожалуйста видос про то как сейчас делать "сложные" галереи, там где куча картинок разных размеров без grid.

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

    спасибо за решение задачки посложнее))

  • @СветланаЛилу-в2д
    @СветланаЛилу-в2д 3 роки тому +1

    Круто, спасибо

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

    Круто бро)

  • @chervyakov-vladislav
    @chervyakov-vladislav 5 років тому +36

    Давай лендос верстрать)

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому +9

      Скоро будем, готовлю уже)

    • @Mykhailo_Vdovychenko
      @Mykhailo_Vdovychenko 5 років тому

      ​@@vadymprokopchuk Супер! Ждем =)

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

      @@vadymprokopchuk так и готовится до сих пор?))

  • @ghostprince3126
    @ghostprince3126 5 років тому +9

    Очень хочу адаптивную верстку на гридах)

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

    Мне очень все понравилось🤗

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

      Жду новых уроков🤔

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

    Отлично

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

    Посмотрел викингов, поставил лайк там, ставлю лайк здесь, сообщаю что хочу сайт на гридах

  • @СашаТюменцев-ш9ь
    @СашаТюменцев-ш9ь 3 роки тому

    спасибо!

  • @БорисГавриков
    @БорисГавриков 2 роки тому

    + Смотрел. Класс.

  • @ПророкМухоед
    @ПророкМухоед 4 роки тому

    Отличное и грамотное видео, молодець.

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

    Небольшой стёб: 92% - оо, это не достаточно. Подождём. А сейчас сколько - 95% - оо, это не достаточно, подождём. А сейчас сколько? - 99,8% - оо, это не достаточно, будем верстать в таблицах! Ждём 100%.

  • @shakur.0238
    @shakur.0238 5 років тому +1

    А как позиционировать элементы внутри грид контейнера?

  • @Канал-м6ц
    @Канал-м6ц 4 роки тому

    очень удобно)

  • @ИванВерушкин-в7ю
    @ИванВерушкин-в7ю 3 роки тому

    С расположением самих блоков по гриду всё понятно. Но у меня возникают сложности с расположением содержимого в этих блоках. Почему-то контент определяет размеры блока, а не блок держит в себе контент, определяя его размеры.

  • @waker_777
    @waker_777 5 років тому +1

    Давай лендец на гридах!)

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

    лендос на гридах топ!

  • @СергейАрхипов-у6б
    @СергейАрхипов-у6б 5 років тому +1

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

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

    Можете подсказать как у вас браузер динамически обновляется?

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

      @Дмитрий Самарин live server это что?

  • @walterwhite4407
    @walterwhite4407 2 місяці тому

  • @rusanov_photo
    @rusanov_photo 11 місяців тому

    На дворе ноябрь 2023, caniuse показывает 97.8 процента поддержки гридов. Можно уже фигачить гридами?

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

    Здравствуйте! Подскажите в чем может быть проблема? Все работает до момента как я написал .box{
    display: grid;
    grid-template-columns: 300px 250px 300px;
    }
    Не произошло никакого перестроения в колонки.
    Уже проверил каждый символ в коде.

  • @Айс-п9х
    @Айс-п9х 5 років тому

    Привет
    Я выучил HTML и CSS и надо ли учить bootstrap или сразу же flex

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому

      сразу flex

    • @Айс-п9х
      @Айс-п9х 5 років тому

      @@vadymprokopchuk Спасибо
      И еще хотел спросить будут ли уроки по JS

  • @_iwS_
    @_iwS_ 5 років тому

    Здравствуй, я зашел к тебе на видео через день после изучения CCS grid на htmlacade** (сайт такой). Ты хорошо все рассказал, но я думаю, что ты мало объясняешь про свойства grid'ов.

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому +1

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

  • @РостиславДідик-й2ь
    @РостиславДідик-й2ь 5 років тому +6

    а верстка ещё будет?

  • @olege452
    @olege452 5 років тому

    да, давай на гридах)

  • @e.sevriukov
    @e.sevriukov 5 років тому

    Отличное видео, но можешь решить вопрос со звуком, если смотреть на телефоне - не хватает громкости... Спасибо)

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

    Объясни пожалуйста, что такое "nth-child". Конкретно интересно что значит это nth

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

      Псевдокласс для добавления свойств определённым дочерним элементам

  • @ТимурМамарасулов-р6п

    Будут ли уроки по вёрстке лэндинга на flexbox и grid??

    • @vadymprokopchuk
      @vadymprokopchuk  5 років тому +1

      На флексах есть лендинг, 7 часов видео, на грибах тоже будет, но пока точно не знаю когда

  • @ОльгаДавиденко-ц9о

    рассказываете про Grig, но у вас ошибка в CSS указано дисплей FLEX! А должен быть дисплей GRID раз вы про грид рассказываете

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

    аслова типа "лупануть" оно надо? blyf[

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

      необходимо, может не сработать, всякое бывает

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

    Такое ощущение что Вадосик верстал сайтец на заказ, но потом подумал: «Хм, надо ролик записать», и ничего не закрывая так ролик и пишет
    П.с. Чекни панель задач

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

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

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

    13:30

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

    красава взго

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

    Хочу верстку на гридах

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

    От 0 до Адын

  • @Tim12x
    @Tim12x 5 років тому

    со звуком беда, тихо

  • @Олег-з3с7г
    @Олег-з3с7г 5 років тому

    а что с этим видео? 4 секунды норм, а после бесконечная загрузка. с телефона тоже самое. остальные видосы норм показывает.

  • @Айбек-г3е
    @Айбек-г3е 3 роки тому

    Где гриды🗿

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

    grid-gap уже не работает. устарел. работает просто gap

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

    плохо объяснил ничего не понятно

  • @АлександрПлатонов-ъ7о

    Спасибо