Полазил в интернете, почитал про тебя, какой у тебя был интересный путь становления. Я очень рад, что есть такие люди с завидным упорством. Ты вложился в это дело, теперь раздаешь другим. Мало таких, с большим сердцем!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Привет Жека) немного запутал. Говоришь колонки, когда нужно говорить про линии сетки. Если бы не внимательно смотрел предыдущие уроки так бы и не понял о чём ты. На 04:00 говоришь, что стартует с 3-й колонки, хотя стартует с третей линии. Спасибо за уроки, ты лучший:3
Для таких полезных видео слишком мало лайков... непорядок! Ребята видимо хотят слушать песни Аллы Пугачевой под балконом и усиков на фотографиях🤣🤣 Обожаю ваш канал с вашим юмором. Продолжайте в том же духе🔥🔥🔥
Привет Жека. Есть просьба - (при последующих записях) если есть возможность, выдели курсор мышки цветным бекграундом, чтоб было понятно где сейчас курсор на экране. Спасибо
Просто гриды нужно больше практиковать. Простым просмотром уроков ты полного понимания не добьешься, пока сам не "поиграешься" с версткой. Если интересно - есть онлайновый игровой тренажер для практического освоения гридов cssgridgarden.com/#ru
Привет Евгеш, как всегда спасибо за инфу, очень достойно, ответь пожалуйсто на пару вопросов: когда планируеш закончить плейлист по гридам(хотябы примерно) и интересует как вообще этот грид по юзабилити, часто ли ты его используеш?можно ли обойтись флексами или есть ряд задач которые можно выполнить ТОЛЬКО прибегая к гридам?Или ты как бы вместе с нами его изучаеш и в реал лайфе не юзаеш?
Женя, здравствуй! Подскажи пожалуйста, почему на 4:40 при задании растяжения по сетке на три колонки (grid-column-start: span 3;), у нас перестает работать свойство для растяжения по строкам (grid-row-start: span 2;)? Причем, простировав это дело у себя, я заметил, что такое поведение наблюдается, только если это у нас самый первый элемент в сетке.
Мда, гриды пока что, трудноваты для усвоения, хотя достаточно интересны и универсальны в использовании. Вопрос: Женя, как часто приходилось использовать на практике гриды? И конечно же, огромное спасибо за уроки!
Эта ячейка занимает всю(!) строку. Если её продолжить вниз, то она не изменит (!) своего положения относительно других ячеек (так и останется первой сверху). Она может только увеличиться в размерах на указанное значение span. Но свойство grid-row-start задает именно положение ячеек, а не размер ячейки-строки. Поэтому никакого видимого эффекта не возникнет. Но если ячейка займет только часть строки, то её можно будет продолжить вниз, пока не кончатся строки ниже её. То же самое происходит и со столбцами, если ячейка занимает весь столбец.
Потому что она тогда начнёт выпихивать остальные ячейки в автогрид. Если в этом примере задать grid-template-rows: repeat(2, 150px);, то тогда всё сработает.
Спасибо, классный урок) Есть вопрос, не пойму, почему на минуте 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 второе свойство убивает первое. Можете пожалуйста объяснить?
Это все связано с явно заданной сеткой: 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 то .... Я пока точно не понимаю как это связанно, но продолжаю копать инфу
Молодец, что снизил скорость повествования. Контент сложный пересматривать приходится по нескольку раз. Догадываюсь, что гриды приходят на замену таблицам.
Почему у вас у grid элементов. border-radius выставляет по дефолту. А у меня grid элементы имеют закругления у краёв. Как будто выставлен border-radius. Но у меня его нет
Почему у меня когда я пишу: display: grid; grid-template-rows: [start] 150px [row2] 150px [row-end]; grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end], то таблица становится в одну колонку по ширине контейнера, в шесть строк. Если написать: grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 150px 150px 150px; то всё в порядке, таблица такая, как в видео.
Давно не смотрел плейлист, решил допройти. Поэтому надеюсь на Вашу помощь, Жека, а то недопонял. Вы говорили, что если для элемента сетки добавить margin, он не будет схлопываться. Не совсем просто понял, в силу того, что давно не практиковался, что означает схлопывание? Заранее спасибо за ответ!
это когда в двух соседних марджинах, тот что побольше, съедает того что по меньше. и в итоге два марджина не складываются, а остается только больший марджин. меньший тоже остается, но внутри большого
Спасибо за материал. Подскажите, если нужно удалить скажем второй блок грида, что бы затем вся сетка схлопнулась как это сделать? Сделал пока так, удаляемому блоку присвоил свойства order с максимальным значением (число больше чем у вас в сетки блоков), а затем уничтожаю блок. Может есть более правильный вариант? Обновление сетки грида? Спасибо.
Люди добрый , разъясните пожалуйста ( 1:55 ) торможу :) html: 1 в css: .grid__item_1{ background-color: brown;} , но ячейка не закрашивается. В чём моя ошибка???
если я говорю элементу займи две строки, он занимает колонку, если я ему говорю займи три колонки, он занимает строку, у меня вопрос, что курили разработчики? 🙂
Чувак ты взрослый мужик, у тебя крутой познавательный контент, я не понимаю в чем смысл кривляния в начале видео.... Уже не первый раз замечаю, без обид , но я испытываю испанский стыд..
Женя, спасибо за все твои уроки, пока что ты для меня - фаворит в эффективности донесения информации, просто не перестаю удивляться такому качеству, ещё и за бесплатно. Лучший.
не правильно сказано, что начинается на первой колонке и заканчивается на третьей колонке. Правильно: начинается на первой линии и заканчивается на третьей линии. Потому что если колонки всего две никакой третьей колонки нет. Это очень путает когда колонок много. Строк же тут вообще нет. Есть ряды и колонки и линии сетки.
думал что Grid, это очень очень темный лес, но после увиденного, начинаю в него влюбляться все больше и больше !!! как всегда , ОГРОМНОЕ СПАСИБИЩЕ за столь четкую и ясную информацию!
![[Limbus Company - Teaser] Season5 - Oblivion](http://i.ytimg.com/vi/8anKuEeZLeI/mqdefault.jpg)
Полазил в интернете, почитал про тебя, какой у тебя был интересный путь становления. Я очень рад, что есть такие люди с завидным упорством. Ты вложился в это дело, теперь раздаешь другим. Мало таких, с большим сердцем!
Жека спасибо большое, так качественно даже за деньги не делают, очень ценю тебя, лучший!
Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.
Суперские уроки! Спасибо большое!! Все понятно и доходчиво!
Я рад!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Ураааа!!! Новый урок по Grid!!!
Женя, спасибо! Люблю учить верстку по твоим урокам.
Пожалуйста!
Как у вас успехи спустя 2 года?
Огромное спасибо! Очень информативно, профессионально, полезно, а самое главное, не скучно!
Большое спасибо. Очень полезно и наглядно. Стандартно наивысшее качество!
Доступно, классно и понятно, очень хороший контент! Благодарю!
Круто! Жду следующую часть!!!
Работаю
супер уроки, очень доходчиво! спасибо большое! всех благ!
Пожалуйста!
Очень доходчиво и наглядно))) спасибо!!!
Жека ты как всегда на высоте! Спасибо за хорошее объяснение
Женя, ты супер! Как всегда)
Спасибо) Ваши видео оч приятно смотреть.
Я рад!
Оказалось не так сложно. Спасибо!!!
Отличные уроки по Grid CSS! Спасибо огромное!
Пожалуйста!
Смотришь и наслаждаешься!
Дуже Хороший урок... Величезне Вам "Дякую"...
Мощны... Тобто, потужний урок. Що треба!
Чудове відео! Дякую!🙏
Посмотрел всё и это было круто!
Я рад!
Преподавание шедеврально)
Спасибо)
Офигеть... так круто разжевать гриды. Это - нечто.
Жека, огромное тебе спасибо!
Гарний контент, дякую
Дякую за урок!
Спасибо за гриды!👍
Спасибо огромное! Стабильно качественный и информативный урок!
Пожалуйста!
@@FreelancerLifeStyle пп
полностью поддерживаю!
Спасибо за отличный урок!
Збыл сказать СПАСИБО. Ты - лучший.
Привет Жека) немного запутал. Говоришь колонки, когда нужно говорить про линии сетки. Если бы не внимательно смотрел предыдущие уроки так бы и не понял о чём ты. На 04:00 говоришь, что стартует с 3-й колонки, хотя стартует с третей линии. Спасибо за уроки, ты лучший:3
Спасибо!!!
Спасибо, Жека!!!
Женя спасибо тебе огромное!
Спасибо 🤘
Для таких полезных видео слишком мало лайков... непорядок!
Ребята видимо хотят слушать песни Аллы Пугачевой под балконом и усиков на фотографиях🤣🤣
Обожаю ваш канал с вашим юмором. Продолжайте в том же духе🔥🔥🔥
ты крут.......
Спасибо!
Жека Спасибо!!!
Спасибо за туториал!
Как всегда - класс!
Здравствуйте!! Уроки просто топ))!! Спасибо) А как вы показываете верстку заказчику перед оплатой? Заранее спасибо))
Привет Жека. Есть просьба - (при последующих записях) если есть возможность, выдели курсор мышки цветным бекграундом, чтоб было понятно где сейчас курсор на экране. Спасибо
Класс!👌
Спасибо!
Файно))
Жду продолжение!!!!
Уроки клас, спасибо. С каждым новым видео понимаю все меньше😁. Flexы были понятнее 🤔
Просто гриды нужно больше практиковать. Простым просмотром уроков ты полного понимания не добьешься, пока сам не "поиграешься" с версткой. Если интересно - есть онлайновый игровой тренажер для практического освоения гридов cssgridgarden.com/#ru
@@masterbiz100 крутой тренажор, а есть еще какие небудь тренажори на русском?
Дякую!!
Привет Евгеш, как всегда спасибо за инфу, очень достойно, ответь пожалуйсто на пару вопросов: когда планируеш закончить плейлист по гридам(хотябы примерно) и интересует как вообще этот грид по юзабилити, часто ли ты его используеш?можно ли обойтись флексами или есть ряд задач которые можно выполнить ТОЛЬКО прибегая к гридам?Или ты как бы вместе с нами его изучаеш и в реал лайфе не юзаеш?
норм он тебе ответил
Спасибо! 👍✨
Let`s go!
Женя, здравствуй! Подскажи пожалуйста, почему на 4:40 при задании растяжения по сетке на три колонки (grid-column-start: span 3;), у нас перестает работать свойство для растяжения по строкам (grid-row-start: span 2;)? Причем, простировав это дело у себя, я заметил, что такое поведение наблюдается, только если это у нас самый первый элемент в сетке.
крутой туториал
запиши небольшое видео как пользоваться Devtools =)
Жесть как круто!
Мда, гриды пока что, трудноваты для усвоения, хотя достаточно интересны и универсальны в использовании.
Вопрос: Женя, как часто приходилось использовать на практике гриды?
И конечно же, огромное спасибо за уроки!
Добрый вечер, к
ак у вас успехи спустя 2 года?
Спасибо
Пожалуйста!
0:59 - если указать margin для элементов, то они не будет схлопывания
На 4:53 как-то странно получается. При grid-row-start: span 2; ячейка занимает одну строку, а по идее должна две.
Эта ячейка занимает всю(!) строку. Если её продолжить вниз, то она не изменит (!) своего положения относительно других ячеек (так и останется первой сверху). Она может только увеличиться в размерах на указанное значение span. Но свойство grid-row-start задает именно положение ячеек, а не размер ячейки-строки. Поэтому никакого видимого эффекта не возникнет.
Но если ячейка займет только часть строки, то её можно будет продолжить вниз, пока не кончатся строки ниже её.
То же самое происходит и со столбцами, если ячейка занимает весь столбец.
Потому что она тогда начнёт выпихивать остальные ячейки в автогрид. Если в этом примере задать grid-template-rows: repeat(2, 150px);, то тогда всё сработает.
спасибо!
Топ контент
Спасибо, классный урок)
Есть вопрос, не пойму, почему на минуте 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 второе свойство убивает первое.
Можете пожалуйста объяснить?
Это все связано с явно заданной сеткой:
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 то ....
Я пока точно не понимаю как это связанно, но продолжаю копать инфу
Молодец, что снизил скорость повествования. Контент сложный пересматривать приходится по нескольку раз. Догадываюсь, что гриды приходят на замену таблицам.
Zoʻr
Привет! Можно ли сочетать grid и flex внутри одного проекта? Или это не имеет смысла?
Да, можно
Не зовсім розумію, чому при {grid-row-start: span 2; grid-column-start: span 3;} обʼєкт займає один ряд. 4:41
Почему у вас у grid элементов. border-radius выставляет по дефолту. А у меня grid элементы имеют закругления у краёв. Как будто выставлен border-radius. Но у меня его нет
Почему не рассказали про свойства align-content и justify-content?
Почему у меня когда я пишу: display: grid;
grid-template-rows: [start] 150px [row2] 150px [row-end];
grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end], то таблица становится в одну колонку по ширине контейнера, в шесть строк. Если написать: grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 150px 150px; то всё в порядке, таблица такая, как в видео.
Давно не смотрел плейлист, решил допройти. Поэтому надеюсь на Вашу помощь, Жека, а то недопонял. Вы говорили, что если для элемента сетки добавить margin, он не будет схлопываться. Не совсем просто понял, в силу того, что давно не практиковался, что означает схлопывание?
Заранее спасибо за ответ!
это когда в двух соседних марджинах, тот что побольше, съедает того что по меньше. и в итоге два марджина не складываются, а остается только больший марджин. меньший тоже остается, но внутри большого
евгений, семья спала, когда записывал?) тихо так, мяяяягенько....))
Спасибо за материал. Подскажите, если нужно удалить скажем второй блок грида, что бы затем вся сетка схлопнулась как это сделать? Сделал пока так, удаляемому блоку присвоил свойства order с максимальным значением (число больше чем у вас в сетки блоков), а затем уничтожаю блок. Может есть более правильный вариант? Обновление сетки грида? Спасибо.
Забавно, что с каждым новым выпуском просмотры уменьшаются)
Ну, кому надо тот посмотрит)
а з чого пан Евген починав,саморозвиток...чи якісь курси?)
Сам
🔥👍🔥
Спасибо!
@@FreelancerLifeStyle Тебе спасибо!!!
обоим вам спасибо
💪
Люди добрый , разъясните пожалуйста ( 1:55 ) торможу :)
html: 1
в css: .grid__item_1{ background-color: brown;} , но ячейка не закрашивается.
В чём моя ошибка???
если класс правильно указать, то сразу закрасится
.grid__item {
background-color: brown;
}
Вы неправильно записали в CSS класс из HTML. Вместо .grid_item_1 нужно записать .grid_item
А где шпаргалка по Grid?
Мне интересно, я не один ещё кто дошёл до этого момента ? )) Всем привет кто жив! Я с 2024 года.
если я говорю элементу займи две строки, он занимает колонку, если я ему говорю займи три колонки, он занимает строку, у меня вопрос, что курили разработчики? 🙂
Они все нормально сделали,тож запутался с начала,но позже понял что они все верно сделали
чет меня одна только теория этих гридов дико выбешивает
согласен, флексы гораздо круче былт
Чувак ты взрослый мужик, у тебя крутой познавательный контент, я не понимаю в чем смысл кривляния в начале видео....
Уже не первый раз замечаю, без обид , но я испытываю испанский стыд..
На что мне обижаться? Но я буду делать то что хочется мне. Спасибо.
@@FreelancerLifeStyle Все чекаю, коли ти заспіваєш Пугчову мені... Я фанат (с) :)))
Спасибо )
Много обучающих видео просмотрел, но только у Жеки качество на таком высоком уровне.
Спасибо)
посмотрел все выпуски🥰 и лайкнул ❤
Спасибо)
Привет Жека! А когда урок по swiper JS?
Женя топ как всегда пересмотрю ещё раз что))), жду шпору
Спасибо за информативный урок.
Пожалуйста!
Женя, спасибо за все твои уроки, пока что ты для меня - фаворит в эффективности донесения информации, просто не перестаю удивляться такому качеству, ещё и за бесплатно. Лучший.
Как всегда the best !!!
А я через grid-area создаю разметку. Это не ошибка с моей стороны?
.item-header {
grid-area: 1/1/2/5;
}
Я вот как раз об этом и не говорил, так как слишком запутанно. Лучше сначала проработать более простые записи
@@FreelancerLifeStyle благодарю
Спасибо большое ,с вашей помощью делаю сайт для резюме ,обожаю Ваши слова ,вот бы и дети мои слушали Вас.
Я рад!
Молодец ! Продолжай в том же духе. Уроки очень приятно смотреть.
Спасибо!
По ощущениям, флексбокс попроще как-то
не правильно сказано, что начинается на первой колонке и заканчивается на третьей колонке. Правильно: начинается на первой линии и заканчивается на третьей линии. Потому что если колонки всего две никакой третьей колонки нет. Это очень путает когда колонок много. Строк же тут вообще нет. Есть ряды и колонки и линии сетки.
Странно, видимо только у меня не работает. grid__item_1 и следующие никак не хотят изменяться
Бесконечно благодарен! Просто, понятно и практично. Лучшие уроки!
думал что Grid, это очень очень темный лес, но после увиденного, начинаю в него влюбляться все больше и больше !!! как всегда , ОГРОМНОЕ СПАСИБИЩЕ за столь четкую и ясную информацию!
здравствуйте,Евгений.Как всегда понятно и качественно.Хотелось бы увидеть ещё видео про адаптив
Уже было. ruclips.net/video/XbnAKjjlgc4/видео.html