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

Подписаться 85 тыс.

Просмотров 40 тыс.

50% 1

Друзья в данном видео рассказываю о возможностях css grid: базовые css свойства и особенности, построение сетки проекта, в конце реализую крутую плиточную структуру которая довольно часто встречается на разных проектах.
И помните... css grid уже скоро... в ваших браузерах =)))
Частые ошибки в верстке сайтов:
• Ошибки в верстке сайто...
Верстка сайта с нуля до завершения:
• Верстка сайта с нуля д...
-------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 111

@mikhailbakhtin3916 4 года назад

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

@vadymprokopchuk 4 года назад

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

@Владислав-б7ф4я 3 года назад

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

@НифталиевВиктор 3 года назад

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

@oleksiik4473 3 года назад

и все же)

@aspirine17 3 года назад

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

@chervyakov-vladislav 5 лет назад

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

@vadymprokopchuk 5 лет назад

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

@Mykhailo_Vdovychenko 4 года назад

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

@BondarenkoMax 4 года назад

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

@ШепелевЕвгений 5 лет назад

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

@vadymprokopchuk 5 лет назад

спасибо!

@ProfessoRGM 5 лет назад

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

@vadymprokopchuk 5 лет назад

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

@kerryjunior5696 4 года назад

Вместо 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; }

@ghostprince3126 5 лет назад

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

@appleipad9226 5 лет назад

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

@РостиславДідик-й2ь 5 лет назад

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

@РостиславДідик-й2ь 5 лет назад

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

@vadymprokopchuk 5 лет назад

Обязательно)

@gamecraft4343 3 года назад

Спасибо

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

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

@soprano6806 2 года назад

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

@the_n01se 3 года назад

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

@vitaliy_ 3 года назад

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

@АртемРубцов-н2э 5 лет назад

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

@micaelkhamardiuk5819 5 лет назад

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

@vadymprokopchuk 5 лет назад

спасибо

@yizhak3092 5 лет назад

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

@vadymprokopchuk 5 лет назад

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

@yizhak3092 5 лет назад

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

@vadymprokopchuk 5 лет назад

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

@vadymprokopchuk 5 лет назад

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

@kostasancez2358 5 лет назад

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

@ihorv44 3 года назад

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

@danylopozniakov3862 5 лет назад

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

@yuravolyanyuk5069 3 года назад

Круто бро)

@user-natyi 2 года назад

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

@СергейАрхипов-у6б 4 года назад

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

@arshavin0309 2 года назад

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

@rusanov_photo 10 месяцев назад

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

@vadymprokopchuk 10 месяцев назад

Уже давно можно

@shakur.0238 5 лет назад

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

@johnsnow6041 4 года назад

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

@amir_not_found 2 года назад

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

@amir_not_found Год назад

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

@вассявассин-ч3ц Год назад

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

@HusterliPlay 5 лет назад

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

@dvsDesing 4 года назад

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

@Николай-ф3ч3д 5 лет назад

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

@БорисГавриков 2 года назад

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

@hachipoli822 3 года назад

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

@ЛеонидПятибратов-э7ц 5 лет назад

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

@walterwhite4407 Месяц назад

@daukakalilaev5950 4 года назад

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

@raoufstrategy 3 года назад

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

@jinduck2053 3 года назад

красава взго

@Айбек-г3е 3 года назад

Где гриды🗿

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

Спасибо

@СашаТюменцев-ш9ь 3 года назад

спасибо!

@ISLEEPWALKERI 4 года назад

Отлично

@iDobroslavin 4 года назад

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

@yurakramar9455 4 года назад

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

@miraigrafit7865 3 года назад

От 0 до Адын

@EduardHoncharov 3 года назад

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

@sadr9189 4 года назад

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

@bohdan3125 3 года назад

13:30

@Mykhailo_Vdovychenko 4 года назад

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

@waker_777 5 лет назад

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

@СветланаЛилу-в2д 3 года назад

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

@ИванВерушкин-в7ю 2 года назад

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

@J_Solo 2 года назад

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

@vadymprokopchuk 2 года назад

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

@nargizaliyeva9743 3 года назад

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

@КираМартынова-э4в 2 года назад

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

@mainName777 3 года назад

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

@Fuchika_SpeedStars 3 года назад

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

@romansokurenko4357 3 года назад

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

@sanjarabakirov7116 3 года назад

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

@alisa1647 2 года назад

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

@alisa1647 2 года назад

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

@Айс-п9х 4 года назад

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

@vadymprokopchuk 4 года назад

сразу flex

@Айс-п9х 4 года назад

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

@apelsin4ik2901 2 года назад

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

@_iwS_ 5 лет назад

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

@vadymprokopchuk 5 лет назад

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

@dz_4640 4 года назад

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

@kardamon7429 4 года назад

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

@sergr1819 3 года назад

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

@Олег-з3с7г 5 лет назад

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

@vadymprokopchuk 5 лет назад

да все норм, вроде

@ПророкМухоед 4 года назад

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

@e.sevriukov 5 лет назад

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

@vadymprokopchuk 5 лет назад

Спасибо за инфу, решу)

@FilmicFil 4 года назад

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

@vadymprokopchuk 4 года назад

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

@ТимурМамарасулов-р6п 5 лет назад

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

@vadymprokopchuk 5 лет назад

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

@Tim12x 5 лет назад

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

@asekabtw 5 лет назад

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

@vadymprokopchuk 5 лет назад

спасибо!

@Mykhailo_Vdovychenko 4 года назад

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