Расположение элементов по грид-линиям | CSS для Профи

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 พ.ย. 2024

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

  • @Марква-щ4ы
    @Марква-щ4ы 5 ปีที่แล้ว +43

    Классная лошадка получилась)))))

    • @uuBach
      @uuBach 3 ปีที่แล้ว

      XD

  • @Лёха-и7п8ы
    @Лёха-и7п8ы 4 ปีที่แล้ว +16

    Эти два видео - первое что я посмотрел про гриды после флексов, и мне кажется, что они даже понятнее и проще чем флексы.

  • @Bousend
    @Bousend 5 ปีที่แล้ว +26

    Авось кому пригодится: я в head своего тестового файла прописал автообновление страницы каждую секунду: - открыл документ в отдельном окне, и наблюдаю, как "на лету" применяются мои изменения в редакторе, не отвлекаясь не переключение между окнами и нажатием F5 ("Обновить"). Экономит немало времени.

    • @АртёмРудаков-ж9з
      @АртёмРудаков-ж9з 5 ปีที่แล้ว

      Да классная фишка, но вообще для автообновления применяют browser-sync

    • @default2199
      @default2199 4 ปีที่แล้ว

      Для такоких вещей существует auto reload. Он обновляет браузер когда ты сохраняешься в редакторе кода. Так еще удобнее.

    • @five_stars2282
      @five_stars2282 4 ปีที่แล้ว

      @@default2199 а как она прописывается?? и где??

    • @ddrgs60
      @ddrgs60 3 ปีที่แล้ว

      @@five_stars2282 скачай плагин reload refresh для хрома

  • @andrey2438
    @andrey2438 4 ปีที่แล้ว +3

    Андрей: Рисует лошадку
    Мое воображение: ОСТАНОВИСЬ!! НЕМЕДЛЕННО!

  • @alexlisouski4069
    @alexlisouski4069 3 ปีที่แล้ว +2

    у тебя есть способность ясно доносить инфу. что важно для новичков.

  • @Art-M
    @Art-M 3 ปีที่แล้ว

    Прекрасно, в порівнянні з float і flex , це казково просто, принаймі для мене, дякую).

  • @VladimirMukhin00
    @VladimirMukhin00 2 วันที่ผ่านมา

    Классное видео, спасибо большое!

  • @ВикторияМироненко-й1й
    @ВикторияМироненко-й1й 3 ปีที่แล้ว +1

    Спасибо, Андрей, огромное за уроки!!! Всегда понятно и увлекательно! А это было самое весёлое задание - расставлять цифры по шахматной доске. )))

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

    Красавчег Андрюша!

  • @ruslanvybornov1237
    @ruslanvybornov1237 4 ปีที่แล้ว +2

    классный урок , пойду домашку делать) Спасибо Вам!)

  • @uuBach
    @uuBach 3 ปีที่แล้ว

    Спасибо за урок, все четко и ясно плюс еще домашка, то что надо :) Если когда то смогу найти и сверстать свой первый заказ на фрилансе переведу гонорар на ваш кошелек. А пока что я нищий студент :)

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

    Спасибо вам огромное)))

  • @videosostv6065
    @videosostv6065 5 ปีที่แล้ว +2

    Legenda! Спасибо

  • @skywatcher6
    @skywatcher6 2 ปีที่แล้ว

    Андрей добрый день. Очень нравится Ваши курсы. Правильно ли я понял? Решение правильно ли я делаю?
    .b1{
    grid-column: 7/7;
    grid-row: 2/2;
    margin-top: -7px;
    margin-left: -10px;
    }
    .b2{
    grid-column: 8/8;
    grid-row: 7/7;
    margin-top: 1px;
    margin-left: -35px;
    }
    .b3{
    grid-column: 10/10;
    grid-row: 5/5;
    margin-top: -14px;
    margin-left: -20px;
    }

  • @ФирудинМусаев
    @ФирудинМусаев 4 ปีที่แล้ว +1

    Спасибо!

  • @ta_ti
    @ta_ti 4 ปีที่แล้ว +2

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

  • @miliba9485
    @miliba9485 4 ปีที่แล้ว

    да,лошадка,что надо..👌

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

    Получилось задать расположение элементов без слешей:
    grid-column: 2;
    grid-row: 1;
    Есть ли в таком подходе подводные камни?

  • @Professor_Ro
    @Professor_Ro 4 ปีที่แล้ว +2

    16:25 очень сомнительная лошадка)))

  • @ДедушкаМороз-и1э
    @ДедушкаМороз-и1э 4 ปีที่แล้ว

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

    • @andrey2438
      @andrey2438 4 ปีที่แล้ว

      каждая ситуация индивидуальна. Флоаты - очень старые и сложные, андрей сказал на том курсе что флоаты использовать когда мы с ними имеем дело (когда мы работаем со старой версткой.

  • @ОлегСирош-ъ4ъ
    @ОлегСирош-ъ4ъ 4 ปีที่แล้ว

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

    • @andrievskii
      @andrievskii  4 ปีที่แล้ว

      Внутри квадратиков))

  • @podmaskoygoluba
    @podmaskoygoluba 4 ปีที่แล้ว

    Возможно, я не правильно поняла задание, но у меня первые три пункта свелись к двум строкам задания сетки
    grid-template-columns: repeat(8, 100px);
    grid-template-rows: repeat(8, 100px);
    и 64 div-ов с классом по цвету (белый или черный) и вписыванием нужной красной цифирки в сам div. Суть была в этом?
    А вот пункт 4 поставил меня в ступор. Возможно, как раз потому, что я не так сделала п 1-3?

    • @ОлегСирош-ъ4ъ
      @ОлегСирош-ъ4ъ 4 ปีที่แล้ว

      У меня тоже непонимание по ДЗ. Что значат цифры на доске? Вот сижу с утра ломаю голову... Написал Андрею в телеграмм, но он пока не ответил.

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

      @@ОлегСирош-ъ4ъ Получилось! Не надо раскрашивать самим сетку. Делаем аналог и в нужные 10 клеток в css позиционируем числа 1-10. Как раз вот этими штуками grid-column grid-row. Остальные ячейки просто остаются незаполненными. Андрей в задании выложил файлик jpg - готовую цветную шахматку. Этот файлик и делаем бэкграундом)) И размер клеток-гридов под jpg определить надо.

    • @ОлегСирош-ъ4ъ
      @ОлегСирош-ъ4ъ 4 ปีที่แล้ว

      @@podmaskoygoluba "Делаем аналог и в нужные 10 клеток в css позиционируем числа 1-10. Как раз вот этими штуками grid-column grid-row."???? Все равно не понял!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    • @ОлегСирош-ъ4ъ
      @ОлегСирош-ъ4ъ 4 ปีที่แล้ว

      @@podmaskoygoluba А!!!!! Понял!!!!!! Мне нужно создать ячейки только на месте цифр!!! Правильно? А цифры прописывать не нужно, да?

    • @podmaskoygoluba
      @podmaskoygoluba 4 ปีที่แล้ว

      @@ОлегСирош-ъ4ъ Ну да, вроде об одном и том же говорим. Ячейки создаются в момент задания grid-template-columns: repeat(8, ?px);
      grid-template-rows: repeat(8, ?px); А заполняем мы только 10 штук. Например, цифра 7 со своим классом. И в css для этого класса grid-row: 4;
      grid-column: 2; типа того)

  • @volodymyrsavaryn3062
    @volodymyrsavaryn3062 3 ปีที่แล้ว

    Что делать если не откривает силку "обязательно прочесть"

    • @andrievskii
      @andrievskii  3 ปีที่แล้ว

      ничего))

    • @volodymyrsavaryn3062
      @volodymyrsavaryn3062 3 ปีที่แล้ว

      @@andrievskii без етого можна сделать домашку?

  • @helloworld-fv8kx
    @helloworld-fv8kx 4 ปีที่แล้ว

    Спасибо!