Grid сетки в CSS. Часть 1

Разбираемся с гридами в CSS с самого начала на простом примере. Верстаем вместе с display: grid; по-новому.
Часть 2: • Grid сетки в CSS. Часть 2
Часть 3: • Grid сетки в CSS. Часть 3
👁‍🗨 Телеграм: t.me/frontend_du2
👁‍🗨 Discord: / discord
👁‍🗨 VK: frontend
👁‍🗨 Дзен: dzen.ru/frontend
👁‍🗨 Rutube: rutube.ru/u/fr...

[@stanislavchekaev9426]

Александр! Это МАГИЯ!!!!

[@alex_dudukalo]

:)) Спасибо. Очень рад, что вам понравилось :)

[@el.d.N]

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

[@dr.angelicus149]

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

[@egorsergeyev9614]

Александр, огромное Вам спасибо за подробное объяснение display: grid; в CSS. Я использовал чаще всего display: flex; и другие, до момента, пока не посмотрел Ваше видео. Но display: grid; , стало для меня прямо открытием. Хочу теперь по необходимости использовать только гриды в CSS. Это же очень удобно!

[@alex_dudukalo]

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

[@stanislavchekaev9426]

Александр, огромное спасибо за ваш труд!!! Вы объясняете так просто и понятно, что даже мне, 50-и летнему динозавру только начинающему путь в IT, всё ясно. В меня никто не верит и иногда опускаются руки. Но посмотрев ваши уроки у меня снова появилась мотивация. У вас талант!!! Не просто преподавать (этого добра на всяких курсах хватает), а именно учить. Пожалуйста, продолжайте...

[@alex_dudukalo]

Спасибо за ваш комментарий 🙈 безумно приятно, ваша поддержка очень вдохновляет ☺ так же рад, что ролики мотивируют вас на изучении JS 🔥 оставайтесь на канале

[@АндрейАрт-щ8п]

Александр, здравствуйте! Конечно же записывайте продолжения этого видео! У Вас есть дар излагать и преподносить материал. И самое главное Вас очень легко воспринимать, что делает обучение очень интересным!

[@augustina1981]

Большое спасибо за видео! Очень хорошо рассказываете, все понятно!☺

[@alex_dudukalo]

Спасибо за ваш комментарий🤗 ваша поддержка очень мотивирует)) оставайтесь на канале😎

[@Andreus9733]

Гриды это просто кайф

[@alex_dudukalo]

Спасибо 🔥🔥

[@RamaRama-qv3jo]

Супер! Благодарю!

[@GalkinCompany]

Отличное видео! Все разложил простым языком, а не как все остальные через понты, красавчик!

[@alex_dudukalo]

Я рад, что видео вам понравилось :) Спасибо за комментарий. Это очень помогает :)

[@ОлегАрхипов-ю3с]

Спасибо, хороший материал! 👍

[@alex_dudukalo]

Спасибо за ваш комментарий🤗 надеюсь и другие видео канала будут вам полезны ☺

[@ЕленаЛемзикова]

И правда МАГИЯ)). Спасибо большое за урок!

[@alex_dudukalo]

Спасибо вам 😇😍

[@TamaraNikolaevna]

Отлично, всё понятно. Спасибо, Александр!

[@alex_dudukalo]

Спасибо за ваш комментарий🤗 надеюсь и другие видео канала будут вам полезны))

[@ВладиславРевуцкий-т9с]

еще не начал изучать grid, но уже его понял и разобрался, хоть и малую часть. Спасибо за классное и понятное изложение материала. Жду продолжения)

[@alex_dudukalo]

Спасибо за комментарий. Я с поздним ответом :) Новые ролики уже на канале )) Надеюсь будут такими же понятными, как этот ))

[@СтаниславГорячев-г1ъ]

Ждем продолжение

[@alex_dudukalo]

Уже готовлю )) Спасибо

[@aim6883]

Магия, молодец)

[@alex_dudukalo]

Спасибо 🤗

[@slavaProg]

Александр "Это магия !" мне очень понравился grig с ним очень просто работать при адаптиве! не приходиться писать переменные и формулы хотя они и так простые 🤫😉 Но все равно grid удобнее и они выглядят как боле перспективное решение

[@giorgiagdgomelashvili423]

Спасибо за контент ❤️

[@IT-Svyatoslav]

Продолжение! Мне ОЧЕНЬ нравится твоя подача и ты сам как ментор, как человек

[@raisin8934]

Здравствуйте Александр! У вас природный талант к обучению, вы очень хорошо и понятно объясняете. Благодаря Вам я разобрался в js. Но в данный момент подзастрял на гридах, тк неочень понятны некоторые вещи. Спасибо огромное за такие понятные разъяснения! Вы очень выручаете!

[@alex_dudukalo]

Очень приятный комментарий)) Спасибо вам за него. Я рад, что видео помогло лучше понять тему гридов. Вижу, что второе видео вы тоже посмотрели. Это круто )

[@raisin8934]

@@alex_dudukalo я и 3е посмотрел) Невероятно понятно объясняете. Еще раз шлю Вам благодарности!!)))

[@deniswhisper1003]

Александр, спасибо за этот ролик. Конечно записывайте следующий!

[@Aleksei_Turlaykov]

Ты верстальщик Гарри! ©ХаGrid Делай продолжение!!!!!🤯🤯🤯

[@avraamlinkolnq]

Вообще круто!

[@alex_dudukalo]

Спасибо за ваш комментарий 😊

[@ИванИванов-э2д7ш]

магия во всем, спасибо)

[@alex_dudukalo]

Большое спасибо вам за вашу поддержку комментариями в роликах

[@АлексейЛисицкий-ы8о]

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

[@alex_dudukalo]

Спасибо вам :)

[@АлександрПетрушкин-ч9й]

Спасибо. Это самое понятное объяснение про grid.

[@alex_dudukalo]

Спасибо за ваш комментарий. Очень рад, что ролик вам помог разобраться в теме ):

[@Эдуард-п2у]

Хорошее видео и понятное. Спасибо

[@tobesunset820]

Спасибо! Получилось закрепить на практике! Интересное сравнение с яйцом в лотке)

[@НаталияЧамарова]

Александр, спасибо! Очень нужное видео, вы отличный преподаватель!! Запишите, пожалуйста, видео по БЭМ

[@СергейОсадчий-и5е]

Это бомба!!! Круто Спасибо. Жду вторую часть.

[@Djeims032]

Ну вот так стало куда яснее) спасибо!

[@alex_dudukalo]

Спасибо вам за отзыв :) Я рад, что видео понравилось :)

[@risenshine1349]

обожаю ваши видео)) давайте больше про JS! У вас талант к объяснению)

[@mambetaa3486]

Спасибо Александр!

[@АндрейБерезовский-е1ь]

Спасибо большое! Очень полезное и доступное видео! Продолжайте в том же духе! Вы молодец!

[@alex_dudukalo]

Спасибо за комментарий😊 надеюсь и другие видео канала будут вам полезны 🤗

[@ОлесяКомарова-ф6ц]

Александр, спасибо за видео! Буду ждать следующие части. Всегда использовала flex, нужно вводить Grid. Было бы здорово, если бы в следующем видео дали краткое пояснение когда лучше использовать flex, grid, bootstrap )

[@ДаниилНелюбин-ъ1ч]

bootstrap использует flex

[@makeuppolina]

Спасибо большое, Александр!

[@stanislavosipkin]

Отлично изложен материал по сеткам, спасибо.

[@coachYuri_bball]

Спасибо за видео!

[@alex_dudukalo]

Спасибо вам :)

[@СтаниславГорячев-г1ъ]

Спасибо, вы гениальный преподаватель 👏

[@alex_dudukalo]

))) Улыбнулся)) Спасибо вам за вашу регулярную поддержку )

[@TeomunMete]

Thank you so much

[@andreyfedyukin8360]

Спасибо 👍

[@Fairuza22]

спасибо!

[@alex_dudukalo]

Спасибо за комментарий 😊

[@relaxdeepsleepmusic3608]

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

[@ИванСмирнов-ц3н]

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

[@ИльяАнастасьев-п4ь]

Теперь хочется попробовать, видео супер 🙌

[@alexolympic]

Супер полезный ролик💪💪

[@dmitrypshenichnikov8033]

Супер! спасибо)

[@nike-555]

🎊 🎉 ураа)

[@AntonioBenderas]

Боялся с флексов переходить на гриды. Надеюсь после видео этой серии мои опасения пропадут

[@vyacheslavponomaryov9084]

Видео всегда отличные! И писать нечего. Вам хейтеров нужно заводить сразу много комментов будет. Скажите что Месси получает незаслуженные награды и сразу комменты посыпятся)

[@DmitriiIassenev]

Лайк и подписка. Спасибо🎉❤

[@alex_dudukalo]

Спасибо за ваш комментарий🤗 ваша поддержка очень важна!

[@Эдгарс]

Интересно увидеть ролик про: Почему некоторые разработчики не работают в компаниях, а делают контент. Интересно послушать + и - такой работы. Может есть какая-то философия этого?

[@alex_dudukalo]

Хороший вопрос, который я себе задаю. На данный момент почти 80% времени я уделяю преподавательской деятельности. В остальном делаю ролики ) Мне нравится это направление :) Многие используют ютьюб, как твою визитную карточку :)

[@Сафонов-т3м]

единственное что я не поянл как сделать адаптивный текст, то есть чтобы он перемещался при увеличении и уменьшении окна. А так все понятно, еще как я знаю есть отдельные единицы измерения под разные экраны es s med и тп

[@nftnewsonline5908]

я уже хочу вторую часть

[@userDDR777]

Здравствуйте Александр! Это крутая магия! У меня вопрос: если каждую секцию сайта сделать сеткой, то не смешаются ли они при адаптиве?

[@alex_dudukalo]

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

[@ДмитрийК-щ9о]

Александр Здравствуйте ! А запишите пожалуйста видео про " bootstrap"

[@Vladimir_Alexsandrovich_I]

очень похоже на табличную верстку, все возвращается?

[@dukecca]

А можно ли расчитывать колонки при помощи calc?

[@КосАн-и7я]

давайте разберем все свойства)

[@alex_dudukalo]

Будем делать ))

[@Youmakes]

😀

[@alex_dudukalo]

🤗

[@АлександрОсипов-ю6к]

Бро запиши роклик, что из JS надо знать начинающему верстальщику

[@alex_dudukalo]

Спасибо :) Да, думаю скоро сделаю такой ролик)) Спасибо за предложение

[@front_praxis]

Для верстальщика в js это работа с дом деревом.

[@АртёмДавыдов-ы5э]

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

[@sergeykhmelnitsky5307]

🤓🤓🤓

[@baytszy]

у меня почему то картинки в сетке уменьшаются сильно....не могу понять почему

[@alex_dudukalo]

Здравствуйте, прошу прощения за долгий ответ. Возможно у изображений не указан размер. Здесь без кода сложно дать ответ :(

[@СтаниславГорячев-г1ъ]

У вас еще канале не работает колокольчик 😢 жму на него выдает ошибку, а на других каналах все нормально

[@alex_dudukalo]

Спасибо за сообщение. Все пытаюсь разобраться, никак не могу понять в чем причина. Кажется раньше все работало хорошо (( Попытаюсь разобраться)

[@HaveFun454]

Мало того что в сеткахъ было не понятно так тебеперь еще в яйцах надо разбираться..

[@kr_angel8965]

Очень классное и понятное видео👍 спасибо

[@alex_dudukalo]

Спасибо за обратную связь 😊 надеюсь и другие видео на канале будут вам полезны))

[@ВиталийРябенко-з1ь]

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

[@alex_dudukalo]

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