CSS Grid за 13 хвилин

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ส.ค. 2024
  • Що таке CSS Grid? Для чого воно потрібне та як з ним працювати? В цьому відео я розбираю разом з вами основні поняття й принципи та показую, як можна створити просту сітку.
    Мій телеграм канал «Той самий Бабіч» t.me/toisamyibabich
    ***
    Підтримати проєкт:
    base.monobank.ua/945RjPetbDGaHT
    www.buymeacoffee.com/babichweb
    ***
    00:00 Привітання
    00:10 Коротко про історію CSS Grid
    01:55 Grid line
    02:28 Grid track
    02:41 Grid cell
    02:53 Grid area
    03:12 display:grid та inline-grid
    03:48 Задання колонок та рядочків
    05:38 Розташування клітинки за лініями сітки
    07:02 Параметри автоматичних рядочків та колонок
    09:55 Розташування елементів сітки в зонах
    12:33 Епілог
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 55

  • @romanmerkulov830
    @romanmerkulov830 8 หลายเดือนก่อน +4

    Одне з самих легких пояснень доволі складної теми. Дякую

    • @babichweb
      @babichweb  8 หลายเดือนก่อน

      Дякую! Може й зберусь колись продовжити цю серію )

  • @maxus6209
    @maxus6209 4 หลายเดือนก่อน +1

    Доброго дня, дякую за Вашу працю

  • @judgedreed5257
    @judgedreed5257 9 หลายเดือนก่อน +2

    Якісний контент. Стисло але більш ніж зрозуміло. Дякую

  • @user-kd2zg7vd4v
    @user-kd2zg7vd4v 8 หลายเดือนก่อน +1

    Дуже гарне відео!

  • @oksanaponomaryova3960
    @oksanaponomaryova3960 ปีที่แล้ว

    Дуже дякую за таке пізнавальне відео🤗

    • @babichweb
      @babichweb  ปีที่แล้ว

      Дякую за відгук)

  • @user-bm7hl3jx9n
    @user-bm7hl3jx9n 4 หลายเดือนก่อน +1

    Дякую за контент УКРАЇНСЬКОЮ!

  • @andrewtan3658
    @andrewtan3658 4 หลายเดือนก่อน +1

    Дякую за контент!

  • @FedorovaNataliya
    @FedorovaNataliya 8 หลายเดือนก่อน +1

    Дякую

  • @user-yl1sd9ye9y
    @user-yl1sd9ye9y ปีที่แล้ว

    Привіт) Дякую за роботу! Підписався,коментар додав)) гарного дня

  • @user-rs4lg8qi8r
    @user-rs4lg8qi8r 10 หลายเดือนก่อน

    Шикарне відео!🔥

    • @babichweb
      @babichweb  10 หลายเดือนก่อน +1

      Дякую!

  • @user-bm8sp9fn4b
    @user-bm8sp9fn4b 7 หลายเดือนก่อน +1

    Супер, дуже доступне пояснення👍

  • @jamesmay5088
    @jamesmay5088 ปีที่แล้ว +1

    Як завжди топ❤ чекаю з нетерпінням на другу частину😊

    • @babichweb
      @babichweb  ปีที่แล้ว +1

      З тим, скільки я робив цю - чекаю ще з більшим нетерпінням, бггг

    • @jamesmay5088
      @jamesmay5088 ปีที่แล้ว

      @@babichweb , нічого😄 справжні поціновувачі якісного контенту готові довго чекати😉

  • @lemberg91
    @lemberg91 ปีที่แล้ว +1

    👍

  • @cosname
    @cosname ปีที่แล้ว

    Супер! Код + Приклад, без води і те що треба

    • @babichweb
      @babichweb  ปีที่แล้ว

      Ще й не матюкавсь!

  • @sashaborduyjan3655
    @sashaborduyjan3655 8 หลายเดือนก่อน +1

    Просто і зрозуміло. 👍🏻

    • @babichweb
      @babichweb  8 หลายเดือนก่อน

      Дякую)

  • @alexandraimereli2892
    @alexandraimereli2892 ปีที่แล้ว

    Дяка, дуже зрозуміло!

    • @babichweb
      @babichweb  ปีที่แล้ว

      Дякую за відгук! Дуже тяжко йшло )

  • @2006kou
    @2006kou ปีที่แล้ว

    Те, що якраз мені треба! Чекаю другу частину. Так тримати 👏

  • @yuriy.myrosh
    @yuriy.myrosh ปีที่แล้ว

    Ого як звук покращився!) Круто, лайк авансом, йду дивитися далі)

    • @babichweb
      @babichweb  ปีที่แล้ว

      Дякую, стараюсь )

  • @user-pb8og9bj6r
    @user-pb8og9bj6r ปีที่แล้ว

    Дякую! Якраз руки не доходили з грідами познайомитись) А тут все просто і зрозуміло! Чекаю другу частину🔥

    • @babichweb
      @babichweb  ปีที่แล้ว +1

      Дякую! Будем ждать разом, бгг

  • @andriistarak6578
    @andriistarak6578 ปีที่แล้ว

    дякую за твою роботу та очікую вже продовження! чітко пояснюєш! не зупиняйся і продовжуй в тому ж дусі))
    P.S. підписався після відео з CSS і вставленими мемчиками)))

    • @babichweb
      @babichweb  ปีที่แล้ว

      Дякую! Сподіваюсь, скоро вже вдасться

  • @content_chameleon
    @content_chameleon ปีที่แล้ว

    👏

  • @user-rj9mn3in9g
    @user-rj9mn3in9g ปีที่แล้ว

    Прийшов до Вас із Лінкедіна. Це коментар як підтримка для розвитку каналу та свідчення про дієвість Вашої самореклами. А контент взагалі чудовий! Шкода, що не було його минулого року.

    • @babichweb
      @babichweb  ปีที่แล้ว +1

      Дякую! Що ж, контент проте є цього року)

    • @user-rj9mn3in9g
      @user-rj9mn3in9g ปีที่แล้ว

      @@babichweb і це чудово!

  • @Alina_Syniavska
    @Alina_Syniavska ปีที่แล้ว

    Приєднуюся до всіх - відео дуже користе, все зрозуміло розказано-показано. І дійсно - css не закінчуються марджинами/паддінгами і колорами. Є що пізнавати 👍 P.S. А жартів ми все-таки вкінці дочекалися 🤣

    • @babichweb
      @babichweb  ปีที่แล้ว

      Серденько за уважність )

  • @slavaslava9763
    @slavaslava9763 6 หลายเดือนก่อน +1

    На відео все просто і ясно, але коли зкопіював код то нічого не працює. Дуже не хватає jsfiddle щоб погратися з кодом.
    Якщо можете то прикріпіть код на пісочницю якусь.
    Дякую за відео, корисно витратив час.

  • @FolinFox
    @FolinFox ปีที่แล้ว

    Доброго вечора Сергій , с цім питання то ясно, а чи можите зробити відео урок ,"як створювати веб-сторінку", це так прохання дуже маленьке)

    • @babichweb
      @babichweb  ปีที่แล้ว

      Дякую за питання.
      Можу.

  • @TheUndead404
    @TheUndead404 ปีที่แล้ว

    Сергію, як вважаєш, для табличних даних краще використовувати просто table? Чи все таки можна і CSS Grid?

    • @babichweb
      @babichweb  ปีที่แล้ว

      Дякую за запитання! Його треба дослідити, насправді, не в останню чергу з точки зору доступности. Я б наразі радив і надалі таблиці робити таблицями, адже це їх задача. До того ж, у таблиць є доволі специфічна поведінка, що впливає на колонки, а я не впевнений, що ця поведінка відтворюється ґрідами.

  • @user-gy6up8tx7r
    @user-gy6up8tx7r 3 หลายเดือนก่อน

    Чекав-чекав жартів, і так і не дочекався))

    • @babichweb
      @babichweb  3 หลายเดือนก่อน

      Треба ще трошки почекать

  • @Nitrant
    @Nitrant ปีที่แล้ว

    Наче і все памʼятав, а тут бац і освіжив знання! Ще й про крапочку дізнався...

    • @babichweb
      @babichweb  ปีที่แล้ว +1

      Так і я тоже про крапочку дізнався з цього відео, по факту )

  • @dmytro.borchuk
    @dmytro.borchuk ปีที่แล้ว

    Бляха, CSS став такий мощний, я не поверстав пару років і вже не пам'ятаю як все працює

    • @babichweb
      @babichweb  ปีที่แล้ว +1

      І це ще не межа!

  • @aleksandraleksandr9866
    @aleksandraleksandr9866 4 หลายเดือนก่อน

    а коли буде другий грід?

    • @babichweb
      @babichweb  4 หลายเดือนก่อน

      От цього поки не знаю ) Але точно буде )

  • @sdwvit
    @sdwvit ปีที่แล้ว

    Буде класно побачити юзкейси в яких флексбоксами не обійтися і треба робити грід

    • @babichweb
      @babichweb  ปีที่แล้ว

      Існує така можливість, ймовірність невеличка, що я присвячу окреме відео верстці дечого цікавенького саме ґрідами.

  • @user-ih5en9cn7j
    @user-ih5en9cn7j ปีที่แล้ว

    👍