CSS Grid Layout. Свойства элементов grid сетки grid-row grid-column order gap и другие

[@p.polunin]

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

[@ЖекаКрылов-о5з]

Жека спасибо большое, так качественно даже за деньги не делают, очень ценю тебя, лучший!

[@ОлегМарченко-ы2ь]

Спасибо огромное! Стабильно качественный и информативный урок!

[@FreelancerLifeStyle]

Пожалуйста!

[@yanareva3732]

@@FreelancerLifeStyle пп

[@LordOzzy1986]

полностью поддерживаю!

[@timgluk]

Спасибо за информативный урок.

[@FreelancerLifeStyle]

Пожалуйста!

[@SemenAlexndrovich]

Отличные уроки по Grid CSS! Спасибо огромное!

[@FreelancerLifeStyle]

Пожалуйста!

[@kristinaalex8025]

Суперские уроки! Спасибо большое!! Все понятно и доходчиво!

[@FreelancerLifeStyle]

Я рад!

[@AntaresOneTwo]

Круто! Жду следующую часть!!!

[@FreelancerLifeStyle]

Работаю

[@evrozah1]

Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.

[@IT-Svyatoslav]

Ураааа!!! Новый урок по Grid!!! Женя, спасибо! Люблю учить верстку по твоим урокам.

[@FreelancerLifeStyle]

Пожалуйста!

[@le0messi]

Как у вас успехи спустя 2 года?

[@ОлегСустов]

думал что Grid, это очень очень темный лес, но после увиденного, начинаю в него влюбляться все больше и больше !!! как всегда , ОГРОМНОЕ СПАСИБИЩЕ за столь четкую и ясную информацию!

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!

[@ThevideOoLoadeR]

Женя, спасибо за все твои уроки, пока что ты для меня - фаворит в эффективности донесения информации, просто не перестаю удивляться такому качеству, ещё и за бесплатно. Лучший.

[@CentnerGovna]

Огромное спасибо! Очень информативно, профессионально, полезно, а самое главное, не скучно!

[@V4VFAloj7juAyQW]

Большое спасибо. Очень полезно и наглядно. Стандартно наивысшее качество!

[@АртемТкаченко-р7л]

Доступно, классно и понятно, очень хороший контент! Благодарю!

[@Zosima-q4j]

Бесконечно благодарен! Просто, понятно и практично. Лучшие уроки!

[@kotiko_oks]

посмотрел все выпуски🥰 и лайкнул ❤

[@annasahradyan9849]

Спасибо большое ,с вашей помощью делаю сайт для резюме ,обожаю Ваши слова ,вот бы и дети мои слушали Вас.

[@FreelancerLifeStyle]

Я рад!

[@aleksgbr3878]

Очень доходчиво и наглядно))) спасибо!!!

[@old__gamer]

Молодец ! Продолжай в том же духе. Уроки очень приятно смотреть.

[@FreelancerLifeStyle]

Спасибо!

[@onlytherareness]

супер уроки, очень доходчиво! спасибо большое! всех благ!

[@FreelancerLifeStyle]

Пожалуйста!

[@АртемДжусупов]

В очередной раз говорю тебе Спасибо за твои суперские уроки!!!

[@MxM_5835]

Жека ты как всегда на высоте! Спасибо за хорошее объяснение

[@DashaG182]

Женя, ты супер! Как всегда)

[@no_name_2mix]

Спасибо) Ваши видео оч приятно смотреть.

[@FreelancerLifeStyle]

Я рад!

[@svetlanaandreeva8762]

Спасибо большое!! Все понятно и доходчиво! Лучшие уроки!

[@ИгорьАксененко-б1м]

Женя, дуже дякую! Корисно та доступно!

[@iamcarinn]

плейлисты по flex и grid просто золотые! огромное вам спасибо!

[@k4ch856]

здравствуйте,Евгений.Как всегда понятно и качественно.Хотелось бы увидеть ещё видео про адаптив

[@maxfatyanov7096]

Уже было. kzbin.info/www/bejne/jpPRcn6gn9GamZY

[@ПетроЖелев]

Чудове відео! Дякую!🙏

[@artyomnazarov8518]

Оказалось не так сложно. Спасибо!!!

[@oleboz95]

Гарний контент, дякую

[@Faradenza-sb3mj]

Лайк за очень познавательный контент

[@Yupitrer]

Мощны... Тобто, потужний урок. Що треба!

[@ЕленаКозлова-э1ж]

Замечательное объяснение. Все четко и понятно!

[@КириллСергеевич-ч3ж]

Смотришь и наслаждаешься!

[@FradPR]

Дякую за урок!

[@fallenstar358]

Посмотрел всё и это было круто!

[@FreelancerLifeStyle]

Я рад!

[@alshabanov]

Спасибо за урок :))

[@СветланаСанкевич-щ4н]

Ты лучший и останешься им! И спасибо, что освещаешь реальные события!

[@СергійК-з5т]

Дуже Хороший урок... Величезне Вам "Дякую"...

[@Xyjail]

Преподавание шедеврально) Спасибо)

[@АлександрА-ц6д9й]

Спасибо!!!

[@GaZiZoViCh-l8n]

Женя топ как всегда пересмотрю ещё раз что))), жду шпору

[@bohdandudchenko939]

Жека, огромное тебе спасибо!

[@o_antushevich]

Спасибо за отличный урок!

[@VM_Dev_tv]

ты крут.......

[@FreelancerLifeStyle]

Спасибо!

[@ЮрийКотенев-х5м]

Спасибо за гриды!👍

[@ivanryapolov7903]

Збыл сказать СПАСИБО. Ты - лучший.

[@РоманСергійовичНагаєвський]

Контент - СУПЕР! Слідуючи порадам Жеки, під час освоєння нового матеріалу, завжди себе себе запитую "А що , якщо?..." (Ось тут виникло запитання !) : "А що, якщо я хочу дублювати якийсь елемент грід-сітки? Відобразити його кілька разів ? Повторити у різних областях або ж просто не займатися Ctrl+C & Ctrl+V у html-файлі ? ", в Google поки ще не знайшов ))

[@АкылбекБайзаков-н7ъ]

Спасибо, Жека!!!

[@keks_o4162]

Оч крутой туториал!

[@alexbel5599]

Спасибо 🤘

[@aleksandrayavorskaya1523]

!!! Спасибо тебе, Человек!!!

[@danilbadretdinov2787]

На уровне!

[@VarlogST]

Офигеть... так круто разжевать гриды. Это - нечто.

[@pro_massages]

Женя спасибо тебе огромное!

[@Dbond1979]

Жека Спасибо!!!

[@Anatoli-bq1pe]

Как всегда - класс!

[@mrSturnn]

Много обучающих видео просмотрел, но только у Жеки качество на таком высоком уровне.

[@dimapnzn725]

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

[@FreelancerLifeStyle]

Там 4ре части про гриды, надеюсь информации достаточно

[@dvsDesing]

Спасибо за туториал!

[@АндрейСереда-н8х]

Молодчага!

[@ВадимОрешков-щ8т]

Привет Жека) немного запутал. Говоришь колонки, когда нужно говорить про линии сетки. Если бы не внимательно смотрел предыдущие уроки так бы и не понял о чём ты. На 04:00 говоришь, что стартует с 3-й колонки, хотя стартует с третей линии. Спасибо за уроки, ты лучший:3

[@наталіяклемишова]

Класс!👌

[@FreelancerLifeStyle]

Спасибо!

[@baikovamaria5725]

Спасибо

[@ВладОся-з7ь]

Просто нет слов все очень круто

[@ivangureev3036]

"Вычисления weeds and high" - норм тема 🥸

[@alexandrminakov97]

Спасибо за ролик

[@AlinaEmv]

Для таких полезных видео слишком мало лайков... непорядок! Ребята видимо хотят слушать песни Аллы Пугачевой под балконом и усиков на фотографиях🤣🤣 Обожаю ваш канал с вашим юмором. Продолжайте в том же духе🔥🔥🔥

[@натальяхарченко-г7х]

Дякую!

[@MegaTesei]

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

[@phoenixbeard8543]

Файно))

[@PorohTech]

Жду продолжение!!!!

[@АрстанбекШаршенов-к4т]

thanks

[@FastBimer]

Дякую!)

[@АлинаФарт]

Спасибо! 👍✨

[@bosbos4888]

крутой туториал

[@MaximVernigorov]

Лучший!

[@FreelancerLifeStyle]

Спасибо!

[@example6963]

Привет Жека! А когда урок по swiper JS?

[@АндрейПотапов-ш9ц]

Уроки клас, спасибо. С каждым новым видео понимаю все меньше😁. Flexы были понятнее 🤔

[@masterbiz100]

Просто гриды нужно больше практиковать. Простым просмотром уроков ты полного понимания не добьешься, пока сам не "поиграешься" с версткой. Если интересно - есть онлайновый игровой тренажер для практического освоения гридов cssgridgarden.com/#ru

[@targarien57d86]

@@masterbiz100 крутой тренажор, а есть еще какие небудь тренажори на русском?

[@ДиасАбдолдаев-о4п]

Здравствуйте!! Уроки просто топ))!! Спасибо) А как вы показываете верстку заказчику перед оплатой? Заранее спасибо))

[@oleg_andrianov]

Жесть как круто!

[@bigthinks2290]

Пушка!

[@FreelancerLifeStyle]

Спасибо!

[@Dmytro-DIY]

Let`s go!

[@ГригорийСитёв]

Как всегда the best !!! А я через grid-area создаю разметку. Это не ошибка с моей стороны? .item-header { grid-area: 1/1/2/5; }

[@FreelancerLifeStyle]

Я вот как раз об этом и не говорил, так как слишком запутанно. Лучше сначала проработать более простые записи

[@ГригорийСитёв]

@@FreelancerLifeStyle благодарю

[@violentiner]

Привет Евгеш, как всегда спасибо за инфу, очень достойно, ответь пожалуйсто на пару вопросов: когда планируеш закончить плейлист по гридам(хотябы примерно) и интересует как вообще этот грид по юзабилити, часто ли ты его используеш?можно ли обойтись флексами или есть ряд задач которые можно выполнить ТОЛЬКО прибегая к гридам?Или ты как бы вместе с нами его изучаеш и в реал лайфе не юзаеш?

[@bekermamatov7049]

норм он тебе ответил

[@ВладимирСолодовник-ы2о]

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

[@АнастасияПрокофьева-и2й]

Топ контент

[@velobarahlo]

спасибо!

[@4ORESIGHT]

Женя, здравствуй! Подскажи пожалуйста, почему на 4:40 при задании растяжения по сетке на три колонки (grid-column-start: span 3;), у нас перестает работать свойство для растяжения по строкам (grid-row-start: span 2;)? Причем, простировав это дело у себя, я заметил, что такое поведение наблюдается, только если это у нас самый первый элемент в сетке.

[@SisgsbKdhdgd]

Zoʻr

[@НиколайПанкратов-к8о]

запиши небольшое видео как пользоваться Devtools =)

[@yuriismakota9574]

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

[@le0messi]

Добрый вечер, к ак у вас успехи спустя 2 года?

[@bq6677]

💪

[@Salykin-pro]

🔥👍🔥

[@FreelancerLifeStyle]

Спасибо!

[@Salykin-pro]

@@FreelancerLifeStyle Тебе спасибо!!!

[@bekermamatov7049]

обоим вам спасибо

[@accforprogandtechs]

0:59 - если указать margin для элементов, то они не будет схлопывания

[@igorlitvintsev2427]

Спасибо, классный урок) Есть вопрос, не пойму, почему на минуте 4:43, когда мы задали grid-column-start: span 3;, наш первый элемент растянулся на все 3 ячейки, но тут же он перестал занимать 2е строки, хотя grid-row-start: span 2; у нас остался прежним. По идее при коде .grid_item_1 { grid-row-start: span 2; grid-column-start: span 3; } У нас этот первый элемент должен занимать 2 строки и 3 столбца, или это как-то по-другому работает? как-то возможно при использовании span второе свойство убивает первое. Можете пожалуйста объяснить?

[@AndreiVelotourist]

Это все связано с явно заданной сеткой: grid-template: repeat(2, 1fr) / repeat(3, 1fr); Если использовать такой набор значений .grid__item1 { grid-row-start: span 2; grid-column-start: span 2; элемент ведет себя предсказуемо, но если изменить grid-column-start на span 3 то .... Я пока точно не понимаю как это связанно, но продолжаю копать инфу

[@siroshserg]

Странно, видимо только у меня не работает. grid__item_1 и следующие никак не хотят изменяться

[@ИльяИваник-ф8ф]

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

[@shairongodly3815]

В медиазапросе можно указать новый порядок grid-template-areas. Так можно разместить сайдбар на всю строку или убрать его совсем. То есть grid-template-areas: "header header" "sidebar content" "footer footer" изменить на: grid-template-areas: "header header" "content content" "sidebar sidebar" "footer footer"

[@ИльяИваник-ф8ф]

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

[@shairongodly3815]

@@ИльяИваник-ф8ф ну, какой вопрос - такой ответ) флексы хороши, но не в карточках

[@ИльяИваник-ф8ф]

@@shairongodly3815 да... я не смог нормально сформулировать)

[@DmitriyWDL]

@@ИльяИваник-ф8ф Нашли решение для этого? Я так понял, что возможно как-то скриптом JS свойство убрать по наличию той или иной ячейки. Но не понятно как это сделать. К примеру класс, где есть описание структуры с сайдбаром, на класс, где сайдбар убран (см. выше). Может так оно работает?