CSS Grid. Полный курс

[@Григорий-т2б]

1 час потратил весь мой день, но я рад что нашёл тебя

[@shamilsalakhutdinov5519]

офигекнское видео по гридам, спасибо за подробное объяснение!

[@КостяКреон]

Низкий поклон тебе добрый молодец... Многое узнал, и закрепил. Благодарю.

[@YauhenKavalchuk]

Пожалуйста)

[@usernamer519]

Лучшее видео по grid css. Огромное спасибо!!

[@YauhenKavalchuk]

Всегда пожалуйста

[@user-pt1te3uh7f]

Это однозначно да, как и курс по Flexbox👍

[@НиколаГеркулес]

Пожалуй, это лучшее объяснение технологии на данный момент.Спасибо,очень помогли!

[@YauhenKavalchuk]

Пожалуйста

[@PieceOfInternet]

Офигенное видео! Спасибо большое!) очень и очень мало полезных видео касательно grid на ютубе, и вы заслуживаете гораздо больше подписчиков/лайков/просмотров!

[@YauhenKavalchuk]

Спасибо за отзыв и поддержку)

[@whicencer8819]

Однозначно. Фрилансер по жизни хуже объяснил

[@atoomotr]

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

[@YauhenKavalchuk]

Пожалуйста

[@tigran842]

Просто супер.... Все четко и доходчиво👍 держи лайк

[@mr.warpunch6007]

Мощный не только СSS grid, но и видео, спасибо автору

[@YauhenKavalchuk]

Спасибо большое

[@prostoy-cheloveck]

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

[@YauhenKavalchuk]

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

[@ВладиславНечаев-и1ъ]

Великолепное объяснение! Наглядно и понятно. Спасибо!

[@YauhenKavalchuk]

Пожалуйста)

[@tianshano]

Очень хорошее видео для изучения, всё подробно и наглядно объяснено :) большое спасибо за Ваш труд!

[@YauhenKavalchuk]

Большое спасибо за отзыв!

[@lowator]

Шикарные уроки, максимально наглядно и понятно. Очень приятно практиковаться по этому гайду. В самый раз для освоения базы. Большое спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@reginar905]

Лучшее видео по Grid Layout! Спасибо большое автору!!!!

[@YauhenKavalchuk]

Спасибо большое за отзыв)

[@polli6408]

Всё чётко и по теме. Спасибо большое, видео очень понравилось!

[@YauhenKavalchuk]

Спасибо за отзыв!

[@АлёнаКуприяшка]

Благодарю! Очень ёмкий и насыщенный курс! Ничего лишнего, все четко и понятно. Интересно, зачем используют до сих пор flex, если есть grid?

[@YauhenKavalchuk]

Спасибо. На самом деле для каждой технологии есть свои специфичные задачи.

[@reckless_owl4801]

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

[@YauhenKavalchuk]

Пожалуйста

[@temjekmasta]

ЕСЛИ ПОСМОТРЕТЬ ВИДЕО ТРИ, ЧЕТЫРЕ РАЗА ТО ВСЕ СТАНЕТ ПОНЯТНО ДАЖЕ ЧЕЛОВЕКУ КОТОРЫЙ ТОЛЬКО НЕДАВНО НАЧАЛ ИЗУЧАТЬ ВЕРСТКУ. СПАСИБО, все отлично разъяснено ))

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@РоманПарух-ю3й]

Спасибо, очень крутое видео! круто что все вместе. Все структурировано. все понятно. по полочкам и по порциям. Божьих благословений тебе!

[@YauhenKavalchuk]

Спасибо большое

[@ВладимирГугин-ш7щ]

Топовый гайд по гридам

[@YauhenKavalchuk]

Спасибо)

[@unknown.6914]

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

[@YauhenKavalchuk]

Пожалуйста

[@saodattimur6267]

korotko chetko kontent deystvitelno polezny! spasibo Avtoru!

[@YauhenKavalchuk]

Пожалуйста

[@ВладимирВиноградов-щ1к]

Спасибо! Отличное качество контента

[@YauhenKavalchuk]

Всегда пожалуйста

[@sssattarov]

Четко.Кратко.Понятно. Благодарю автору за такую годноту!

[@YauhenKavalchuk]

Пожалуйста

[@paulradyna5079]

thank you for your great explanation regarding css-grid-layout. good luck!

[@YauhenKavalchuk]

thanks

[@АльбертРубцов]

Восторг ) Спасибо большое ) Думаю что такое видео заслуживает намного больше лайков 🙄

[@YauhenKavalchuk]

Спасибо большое)

[@psix9618]

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

[@marlonbrando458]

Чётенько, с меня лайк!

[@TheError220]

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

[@YauhenKavalchuk]

Спасибо за отзыв

[@marianechaeva8138]

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

[@YauhenKavalchuk]

Пожалуйста

[@nuradiledilov784]

Лучший канал по веб-технологиям на просторах рутуба. Контент как всегда топ, но не понял практического применение именования grid-линий. Что без них, что с ними одно и тоже и дополнительного удобства или читабельности тоже не ощутил.

[@YauhenKavalchuk]

Да, для меня это тоже загадка. Мне больше нравится именовать через aria - это намного нагляднее и понятнее. Но раз такое есть, значит и есть варианты использования

[@ярослав-ы1й4у]

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

[@YauhenKavalchuk]

Пожалуйста

[@ImAima21755]

Лучшее видео про эту технологию!Спасибо)

[@YauhenKavalchuk]

Пожалуйста

[@ImAima21755]

@@YauhenKavalchuk как вы считаете,стоит ли учить flex и float если есть grid?

[@YauhenKavalchuk]

Flex однозначно стоит, на канале кстати есть курс. А вот float можно уже пропустить

[@ЖенеральЧернота]

лучший туториал по гридам. Все по полочкам

[@YauhenKavalchuk]

Спасибо)

[@ЖенеральЧернота]

@@YauhenKavalchuk не за что - правду говорить легко и приятно)) Могу я спросить: Вы фронтендер по профессии? Имею ввиду- практика у вас большая или больше теоретически?

[@aleksey2408]

Спасибо ! Очень помогло !

[@YauhenKavalchuk]

Пожалуйста)

[@owenfrozen]

Кайф, смотрится как интересный сериал, легко и не принуждённо 😄

[@YauhenKavalchuk]

Спасибо

[@Freelancer19841]

Потрясающая лекция. Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@Yoda7766]

Самое топовое видео, что нашел! Благодарю!!! =)

[@YauhenKavalchuk]

Пожалуйста

[@ИванТюников-д3е]

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

[@YauhenKavalchuk]

👍

[@enjicITmagic]

видео понравилось, очень круто, вы супер!

[@YauhenKavalchuk]

Круто!)

[@yur.nester]

Отличное обьяснение. Мысли складываются как яблочки в корзину

[@YauhenKavalchuk]

Спасибо

[@nata_shka]

Спасибо за урок. Детально и понятно.

[@YauhenKavalchuk]

Пожалуйста)

[@kostiantynsydorenko7344]

ты молодец. очень крутое видео

[@ВолодимирБарибін-е8у]

Спасибо за видео! Объяснили очень понятно и доходчиво!

[@YauhenKavalchuk]

Пожалуйста

[@Justflywithegs223]

на сегодня - поддержка браузерами 96% !!! круто !

[@YauhenKavalchuk]

👍

[@Bratkovsl]

Спасибо! Все очень понятно

[@YauhenKavalchuk]

Пожалуйста

[@lvivduncan]

потужне відео, Євген! дякую

[@YauhenKavalchuk]

Пожалуйста)

[@plegmatik]

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

[@YauhenKavalchuk]

Спасибо за отзыв

[@saluteismyname]

Спасибо!!!

[@YauhenKavalchuk]

Пожалуйста

[@igorkl5167]

Одно из лучших видео по grid css! Спасибо большое, автор. Уверен, что создание такого видео требует много времени.

[@YauhenKavalchuk]

Спасибо за отзыв

[@ПавелРубан-е5м]

Добрый вечер,спасибо огромное за курс!Объясните пожалуйста разницу между align-items,justify-items и align-content,justify-content!Заранее спасибо!

[@whoyeahyou]

Да

[@vladimirww5152]

Класс!

[@YauhenKavalchuk]

Спасибо)

[@alsusayfulina1865]

Отличный курс 👍 Очень благодарна за него! У тебя здорово выходит, удачи во всех проектах!))

[@YauhenKavalchuk]

Спасибо

[@user-oa0e74awe5o]

38:17 бобрал🤣 (Бобро поржаловать) но уроки супер👍👍 нашел этот клад благодаря RSS а именно Виктору Ковалеву, который и подсказал название.

[@YauhenKavalchuk]

🙂

[@Ryterish]

Спасибо

[@YauhenKavalchuk]

Пожалуйста

[@Кабан-й9ъ]

Мы в шараге по этим видосам учимся 👍. Надеюсь вы учитесь в нормальном месте

[@YauhenKavalchuk]

🙂

[@Кабан-й9ъ]

@@YauhenKavalchuk Ля, мне тоже весело🙂🙂🙂. Расскажу подробнее раз пошло дело. У нас верстку ведет женщина лет 60, явно плохо разбирающаяся в it. Прочитает нам введение с какого-нибудь метанита, потом включает проектор и говорит: "вот вам видео-урок, переписывайте ссылку, смотрите." После этого видео она раздала всем листочки - рисуйте мне макет для гридов. У каждого проверю! Спасибо за внимание. Надеюсь вам повезло больше

[@mixm1572]

Дзякуй

[@YauhenKavalchuk]

Кали ласка)

[@maksRnik]

Ты гений

[@YauhenKavalchuk]

Благодарю

[@sb9185]

Евгений здравствуйте, в каких случаях не работает auto-fit и auto fill ? Я имею ввиду в каких условиях не выполняется это свойство, может ли мешать строчка кода или значение в процентах и т.д ? Не могли бы Вы помочь, просто я искал на зарубежных сайтах но не нашёл ответа ? Кстати очень жду курс по Redux)

[@YauhenKavalchuk]

Обычно, когда такие вопросы приходят, то я прощу сделать пример в какой-нибудь песочнице и поделиться ссылкой. По словам трудно понять, как работает код. Касаемо курса по Redux он уже есть на канале, поищите в плейлистах

[@Antinormanisto]

а в чем отличие justify-content и justify-items? вроде одинаково при обоих случаях. 34:26

[@toxiq7532]

то что надо

[@YauhenKavalchuk]

спасибо

[@КостяКреон]

Все делал как ты показывал....ещё несколько раз потренируюсь и в путь.... :)))) есть вопрос по поводу GRID(оф).... Это всё, или есть ещё что-то, что нужно знать?

[@YauhenKavalchuk]

Этот курс - очень хорошая база, его вполне хватает. Осталось только потренировать практику

[@АраГорн-ж5ы]

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

[@YauhenKavalchuk]

Это был первый серьёзный курс на канале. Сейчас всё на много лучше)

[@boole_cat]

В чем отличие align-self от align-items и align-content. align-content примерно понятно применяется к контейнеру но остальные применяются к элементу же? и делают одно и тоже...

[@YauhenKavalchuk]

Добавьте чуть больше элементов и поизменяйте ширину экрана

[@Antinormanisto]

24:00 не до конца понял всё же про именование и про span

[@maksymkrokhmaliuk7719]

Дякую

[@YauhenKavalchuk]

Пожалуйста

[@zergzerg4844]

почему то не срабатывает медиа запрос @media (max-width: 320px) .На 510 работает, убирается сайдбар и остаются 2 колонки., а дальеш когда уменьшаю окно , стопорится на 2х колонках и все. Все далел строго по вашему уроку, не пойму в чем может быть дело.

[@YauhenKavalchuk]

Перепроверьте синтаксис, возможно где-то допустили ошибку

[@zergzerg4844]

@@YauhenKavalchuk да, нашел, действительно косяк в синтаксисе был, спасибо

[@boole_cat]

в 22 году что выбрать флекс или грид?

[@YauhenKavalchuk]

Используются оба, просто для разных задач

[@boole_cat]

@@YauhenKavalchuk видео конкретных примеров , когда бы выбрали флек или грид было бы многим интересно.Спасибо!

[@lifemagick]

32:25 Лучше бы этот урок содержал по несколько элементов в строке.... многим было бы понятней.

[@YauhenKavalchuk]

Возможно…

[@iGotton]

+

[@evgeniyprowork]

А чего вчера ролик был удален ?

[@YauhenKavalchuk]

Он не был удалён, наверное - это глюк KZbin, т.к. на этом ролике стоит отложенная публикация

[@ВалентинаТерезюк-ь9я]

Не поняла как работает order

[@YauhenKavalchuk]

По сути, так же как и во flexbox

[@user-pt1te3uh7f]

42:14

[@YauhenKavalchuk]

?

[@user-pt1te3uh7f]

@@YauhenKavalchuk мое место остановки курса, с котрого продолжу обучение

[@user-pt1te3uh7f]

@@YauhenKavalchuk Эти тайм коды я ставлю чисто для себя, как закладку места остановки, чтоб потом продолжить обучение с этого места, они чисто для внутреннего пользования, поэтому не обращайте, пожалуйста, на эти закладки внимания. Автору респект за классные курсы, которые актуальные по сей день 👍

[@RushHour-tb8cg]

почему так мало просмотров

[@YauhenKavalchuk]

Понятие не имею)

[@СергейКр-щ4с]

Для верстки писи (4:10) 😅

[@YauhenKavalchuk]

ПисеМ

[@Alex.Krayev]

Нихуя не понял, но было интересно

[@YauhenKavalchuk]

А давайте культурно разговаривать!)

[@bdg5242]

@@YauhenKavalchuk культурность относительное понятие, нахуй.

[@NickTereh]

Уже лучше английский язык, чем такая трасянка из русских и английских слов.

[@YauhenKavalchuk]

Проблема в том, что если я начну делать лекции на английском, то такие же «эксперты» начнут советовать мне учить грамматику и произношение. И что? Закрывать канал?

[@NickTereh]

@@YauhenKavalchuk думаю, английский неносителя - это адская боль. Я предлагаю использовать русский язык, а не смешивать русский и английский. Ещё убивает, когда авторы английское слово начинают склонять или произносить во множественном числе. Сидишь и думаешь, как это за слово в единственном, потом ищешь подходящий аналог в английском. Столько времени впустую тратится. Представьте, если б я сказал "Столько сэкондов впустую вэйстицца". Вроде, понятен смысл, но уж лучше англоязычные авторы.

[@YauhenKavalchuk]

Работая в IT, со временем разговорная речь в это и превращается. Это лишь вопрос времени. Даже если ты персонально будешь использовать только русские аналоги, рано или поздно сдашься

[@NickTereh]

@@YauhenKavalchuk отчасти согласен с Вами. Такая речь лично мне напоминает молодежный сленг, как в чёрных необразованных кварталах США. Ведущие специалисты умеют переключаться между языками, доходчиво объясняя информацию. У меня сложилось убеждение, если человек путает слова, то скорее всего он говнокодит без желания развиваться. Вы же подаёте пример другим, будьте на высоте, а не "ещё одним парнем с микрофоном".

[@salurg.]

По HTML, CSS и Флексам были отличные курсы. Этот, к сожалению, заметно хуже(

[@YauhenKavalchuk]

Это был один из самых первых курсов на канале. И первый русскоязычный курс по гридам на KZbin

[@naFonke]

что такое layout ахах

[@YauhenKavalchuk]

В дословном переводе - слой. В контексте веб-разработки - блок разметки страницы (глобальный или локальный)

[@ashabahmad5714]

столько безполезного разговора в начале

[@YauhenKavalchuk]

🤷‍♂️

[@atlasua2021]

Привет. Использование подобного кода быстрее Flex, но хочу узнать. Grid-Name сильно замедляет работу, по сравнению с обычным grid-area? Пример калькулятора. Или есть вариант получше? .grid { grid-template-areas: "bt_del bt_del bt_clr bt_clr" "bt_1 bt_2 bt_3 bt_add" "bt_4 bt_5 bt_6 bt_sub" "bt_7 bt_8 bt_9 bt_div" "bt_l_brk bt_0 bt_r_brk bt_mul" "bt_sumbl bt_point bt_res bt_res"; }

[@atlasua2021]

Если есть урок по скорости работы верстки, я бы хотел посмотреть.

[@YauhenKavalchuk]

Для калькулятора норм, но в основном используется grid-area.

[@BoffkaBoffka]

Спасибо! P.S. лайк и подписка, однозначно!!! Еще раз спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@TheTexPro]

Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@alexandr8978]

Это лучшее видео по Grid! Спасибо! Теперь хоть ясно стало, что да как от самого начала и до конца Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@sergekost1980]

Спасибо! Отличный разбор, очень актуально )

[@ЕвгенийЛитовченко-р3и]

За пол года с лишним дошел до изучения React, ну и пока шел естественно уже забыл верстку практически которую изучал в начале пути. Наткнулся на хороший курс по React в котором проект построен в плане верстки на гридах. Сначала испугался, думал пропущу я эти гриды поскольку когда начинал учиться с флексом разобрался 50/50. И тут решил все таки попробовать посмотреть поверхностную инфу. Как же я ошибался на сколько все просто и удобно. Автору большое спасибо за отсутствие воды, за перемотку момента написания кода и т.д. Очень крутой базовый видеосправочник, чего с головой хватает для задач которые сейчас передо мной стоят. Как закончу курс по реакту обязательно пошарюсь по каналу!!!

[@YauhenKavalchuk]

Спасибо большое за отзыв)

[@Anshegar]

У меня почемуто внутреняя сетка выходит за пределы ячейки P.S. Нашел в чем беда - у внетреней сетки grid-gap и padding сносят верстку нафиг, но получается что внутрение отступы нифига не сделать . уже на 4 колонках внутреней сетки все начинает наезжать на соседние блоки, даже без падингов и гэпов. Короч надо ячейки внешней сетки больше делать, минимум 250px если во внутреней сетке больше 4 элементов, иначе все все посъедет к херам

[@YauhenKavalchuk]

👍

[@diktashum15]

Спустя три года это видео просто пушка в сравнении сколько видео я пересмотрел. везде все вроде понятно но тут разжовано на максимум! Спасибо!

[@YauhenKavalchuk]

Спасибо за отзыв

[@piotrl7618]

Спасибо, автор очень доходчиво объясняет! Ждём новых видео

[@smartbrain4623]

Исчерпывающе, наглядно, детально. Спасибо) Видос супер🤘

[@daniilkazak7323]

А это видео еще актуально ?

[@YauhenKavalchuk]

Актуально

[@yaroslavzef7267]

Благодарочка!

[@БольшойОтец-з2ы]

Я не верю тебе Истинные веб страницы до сих пор пишутся олдами на html 1

[@YauhenKavalchuk]

🤣👍

[@dgtal1]

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

[@PUSHKA-s8q]

Ура, после двухнедельного обучения CSS я могу создавать нормальные desktop сайты. Спасибо автору за такой видеоурок. Все понятно и просто объясняет, то что нужно новичку!

[@YauhenKavalchuk]

Спасибо за отзыв

[@ivansidorov5]

А можно ли заставить работать grid как table? (ячейки автоматически выравниваются под контент, заголовки столбцов синхранизируются с широной ячеек столбца) и все это без использования JS

[@YauhenKavalchuk]

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

[@JdIm6fhjLgdWRhn]

46:00

[@YauhenKavalchuk]

🤔

[@servus7314]

Спасибо за очередное классное видео. Подскажите пожалуйста, планируете ли обновить текущее видео (2019г), с учетом того, что Грид стал еще распространен и популярнее?

[@YauhenKavalchuk]

Пока нет, он вполне актуален и рассказывает всё необходимое

[@РомаБоренко-г2э]

наконецто я нашол великолепный урок

[@ВалерийЛо-ф7л]

Недавно досконально начал изучать HTML, CSS и нарвался на Ваш канал. Очень подробно, доходчиво, спасибо за труд!

[@YauhenKavalchuk]

Спасибо за отзыв