CSS Grid Layout. Кроссбраузерность. Grid и Flex. Основные понятия.

Что же такое Grid Layout? Суть этого модуля заключается в разделении веб-страницы на столбцы и строки. В получившейся сетке можно размещать элементы. Управлять размерами и расположением этих элементов можно с помощью специальных свойств модуля.
Эта способность позволяет очень гибко отображать элементы на экране без изменений структуры кода. Но то же самое умеет и Flex скажешь ты. И это верно, но фишка в том, что помимо прочего Grid умеет управлять элементами в двухмерной плоскости, то есть и по горизонтали и по вертикали одновременно. Flex же работает с одной осью - горизонтальной либо вертикальной. Отлично, но че там с кроссбраузерностью? На первый взгляд все не плохо. По данным сервиса Can I Use модуль Grid Layout Level 1 поддерживают 93% пользователей. Даже ослик 11й что-то понимает правда с префиксами. Но поскольку Grid Layout довольно большой модуль использующий множество свойств, проверять поддержку следует каждого свойства который захотите использовать.
👉 Спецификация для браузеров Microsoft (eng): fls.guru/grid.html
👉 Известные баги Grid: fls.guru/grid.html
👉Весь прейлист CSS Grid Layout: - • CSS Grid Layout
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

🤟 Весь плейлист CSS Grid Layout kzbin.info/www/bejne/fYecY3yagqx5nKM 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@stephencurry8078]

Привет, очень нужен курс по вёрстке интернет магазина, Как сделать карточку товаров с корзиной (которая изменяется в зависимости от добавление товара в корзину), с возможностью добавление в избранное и выставлением рейтинга. Как сделать? Сверстать вручную или использовать какие то CMS вроде Opencart и тд. Как сделать, подскажи пожалуйста. (В виде курса, очень нужно). Как сделать рабочее поле регистрации пользователя с разным уровнем доступа.

[@alexgeebee]

а что за музыка в конце видео?

[@mobilegames9368]

Сделай пожалуйста плейлист по foundation, на просторах его вообще нету

[@patcherinokripperinopatche7245]

Прошу прощения. Что такое префиксер и как его найти 🤣

[@MT-sh4ko]

Именно благодаря Вам, я понял, как правильно использовать те или иные технологии, а конкретно Flexbox (до сих пор порой пользуюсь Вашей шпаргалкой, если что-то забываю), с удовольствием смотрю Ваши стримы, где черпаю для себя новые знания и в конце концов, посмотрев видео из цикла знакомства с фрилансом, обозначил нужный мне вектор и то, что мне нужно сделать, чтобы начать зарабатывать. Спасибо вам за ваш контент. Я думаю, что любому контент-мейкеру это было бы очень приятно, но в плане подачи материала вы действительно делаете то, что делают не все Ваши коллеги по цеху, ютуберы веб-программисты. Удачи и процветания.

[@detro1821]

как успехи в веб?

[@zanzak312]

Привет! Есть ли сейчас заработок с фриланса? или твоя цель - устройство в компанию джуном? Сколько по сумме время обучения заняло?)

[@artemnikitin9696]

Женя, спасибо тебе за твое творчество , ты делаешь жизнь многих людей лучше . В интернете нет настолько качественного бесплатного курса по Front-End разработке как у тебя, вероятно, даже платные будут ниже .

[@HA_CTPIME]

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

[@nikitaustinenko5737]

Очень понятно , полезно. Нравятся абсолютно все видео! Монтаж очень крутой, что прям кайф смотреть!

[@FreelancerLifeStyle]

Я рад!!

[@dovuret2191]

Шановний Євгенію, Я хочу щиро подякувати вам за ваші безкоштовні уроки з веб-розробки. Ваша велика щедрість та бажання допомагати іншим насправді вражають мене.

[@SmotritelTube]

Учусь , а в свободное время тоже учусь, сплю тоже учусь , сижу в тауалете учусь , ему учусь и все равно самый тупой 🤣

[@nilufarabylova3897]

Ты не один такой 😜

[@user-hr5xl1qz4j]

@@nilufarabylova3897 и ты тоже

[@user-ic9hf3ps4z]

+ как успехи спустя год?

[@hannanesterova9200]

Як успіхи?)

[@SmotritelTube]

@@hannanesterova9200 Cтал мидлом, работаю в кайф, сохрнаяю ворк лайф беленс

[@yuliaosavoliuk9980]

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

[@thebaglay123]

За день больше знаний чем за 3 года в шараге.

[@FreelancerLifeStyle]

Я рад!

[@user-nb3rx2cg4j]

Евгений, мы Все рады, что жизнь и обучение продолжаются. И с нетерпением ждём очередных твоих подвигов (ударение на О а затем и на И) и наших продвигов с твоей помощью. Спасибо за труд!

[@FreelancerLifeStyle]

Пожалуйста! Рад что полезно!

[@maxkos6184]

Видео отличное! Автор - мастер!!! Так объяснять, быстро и доходчиво, это талант!! Спасибо за старания и удачи

[@FreelancerLifeStyle]

Пожалуйста! Скоро следующая часть.

[@popovvv]

По кайфу, благодаря тебе получил rising talent на Upwork

[@FreelancerLifeStyle]

Супер! Я рад!

[@user-jh7ku8hb2j]

Ничего не понимаю, но все равно каждый раз смотрю 🤣

[@FreelancerLifeStyle]

Ахаха, я тоже)))

[@user-qe3oh3wl6h]

Ура, лучший блогер по верстке сделает лучший гайд по Гридам и проекты будут сдаваться бистрее)

[@FreelancerLifeStyle]

Постараюсь)

[@DmitriyWDL]

@@FreelancerLifeStyle Хотел спросить. А есть видео где рассуждения где лучше применять Флексбокс, а где Гриды, и почему, с примерами? А то у меня сакральный вопрос: нафига нужны гриды. Помню что-то было про применения Грид в каталогах (как приоритетный вариант), но вопрос "Зачем" все же актуален для отдельного видео. Пересматриваю плейлист, так что может еще не дошел до ответа :). Спасибо!

[@MrPlayer]

У тебя был курс по флексу но я очень ждал грида. Пасибо

[@FreelancerLifeStyle]

Пожалуйста!

[@user-vk1kb3xj6b]

Жека, спасибо! Было полезно

[@FreelancerLifeStyle]

Пожалуйста!

[@koreikin]

Круто, круто. спасибо большое! Как всегда, донесение информации на высшем уровне. Не в обиду другим, но лучший поставленный голос, из всех кто обучает IT.

[@FreelancerLifeStyle]

Спасибо!

[@koreikin]

@@FreelancerLifeStyle Спасибо вам, наш Народны учитель.Есть по английскому Народный учитель на просторах KZbin, вы я думаю уже для многих стали по IT. Каждый, кто благодаря вам войдет в сферу IT, просто будет обязан поддерживать канал. Еще раз спасибо, мы все от вас буде ждать новых видео.

[@isok.atyrau]

Ооо наконец-то👍👍👍

[@FreelancerLifeStyle]

Да)

[@ghost8652]

Позитивный паря))) Крутой канал! Учу JS, но ты меня реально замотивировал и на вёрстку))) Пы.Сы. Настолько доступного изложения контента я ещё не встречал в рунете. Круто.

[@evgeniyprowork]

без знаний html, css не вижу смысла учить js

[@ghost8652]

@@evgeniyprowork знаю на базовом уровне, но решил углубиться

[@Xyjail]

Спасибо) Чем-то табличную верстку начала двухтысячных напомнило))))

[@keks_o4162]

Спасибо за полезный контент

[@user-pn2ev2je2l]

Благодарю Вас за видео.

[@FreelancerLifeStyle]

Пожалуйста!

[@user-lt2ku4vv2q]

интересненько... ждем дальше)

[@dozatim1701]

Жду продолжения по grid

[@user-fo3mr6gm6y]

Информативное видио! Благодарю

[@artgas_pro]

Обучайся, развивайся и, и, и никогда не сдавайся ))))) Начинал изучать "сайтостроение" год назад с языков PHP и JS (некому было подсказать с чего и как начинать) немого въехал в тему, думаю начну сейчас делать крутые сайты, и столкнулся версткой... И слава Богу что нашел этот канал. Это было прям открытие, столько полезной практической информации. Просидел тут 4 месяца, пересмотрел почти все видео. Закончил на флексе и вот ГРИДЫ... Опять надо учить )))) Вообщем. Евгению хочу сказать ОГРОМНОЕ СПАСИБО за такой колоссальны труд. А тем кто учит пожелать успехов и не останавливаться в процессе обучения - идти до конца!!! P.S.: Подписался на patreon - за 2 бакса получил целую кучу плюшек в виде полезного кода и макетов + еще и письмо прислали с настройками по галпу. Бери ставь да пользуйся. Тем кто хочет экономить время - рекомендую. Цена бросовая, а контент очень мощный.

[@silenciomar]

уже работате в вебе?

[@artgas_pro]

@@silenciomar Так, но на фрілас проєктах.

[@oleh4788]

@@artgas_pro на яких сайтах начинали?

[@user-ov7oe3xt2c]

Як завжди, на високому рівні!

[@FreelancerLifeStyle]

Дякую!

[@kzuralsk7533]

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

[@brodyagaPATY]

Жека ты вдохновляешь🔥🔥🔥🔥🔥

[@FreelancerLifeStyle]

Я рад!

[@nicolaibondarenco3817]

Жека, все отлично! Смотрю и повторяю за тобой. Все доходчиво объясняешь! Главное практиковаться по-больше и все будет чики-пуки. Вчера смотрел стрим и знаешь...ты мотивируешь учиться дальше! Спасибо !

[@mainsport7851]

Супер выпуск.

[@koni.21]

Качественно, полезно, информативно. Спасибо, продолжайте в том же духе

[@user-vp9qe7gh1h]

Продолжайте) благодаря вам сдал экзамен в колледже по html & css)

[@user-ip3os7dx6r]

2 минуты назад вышло. Ставлю лайк даже не посмотрев

[@FreelancerLifeStyle]

Спасибо!

[@bessonov7897]

Дождались!!!!!

[@FreelancerLifeStyle]

Да!

[@dinir1000]

Если не вы, то никто) Спасибо Жека от души

[@FreelancerLifeStyle]

Пожалуйста!

[@constantinetreschka2491]

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

[@user-ve7tx3ud6n]

Спасибо Евгений! Как всегда на высоте.

[@FreelancerLifeStyle]

Пожалуйста!

[@user-fg8pq3kk5l]

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

[@armenakcomp]

Класс началось, буду ждать следующего выпуска. Спасибо за полезный контент.

[@ragetypebeat]

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

[@FreelancerLifeStyle]

Спасибо!

[@user-yw6bj5oe9w]

Класс. Просто супер.

[@yuriismakota9574]

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

[@user-yu1fv5xk7r]

Спасибо Жека ! я вижу мой ранний комментарий не прошел стороной ! ))

[@FreelancerLifeStyle]

Все читаю)

[@tsarrrart6046]

Спасибо за годный урок. Жду следующее видео)))

[@user-tz4dl9yp4o]

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

[@dzhus4169]

Привет! Спасибо за годный контент! Когда js/jquery?

[@ruslanegamoff5393]

Спасибо ждали. Ты всегда объясняешь все и плюс качественно. Поэтому ты лучший. Да ещё и шутки топ.

[@user-ys3in6qx6f]

Спасибо! 👍✨

[@NataOnion]

Ты лучший в своем деле!!

[@andrii5866]

Супер!!! Нова заставка топпп!!!

[@nobody-here_2000]

Ви були би крутим актором! Все чотко!

[@ViacheslavM3192]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@Anatoli-bq1pe]

Благодарю друг!

[@jasonborn4373]

Perfect! Спасибо!

[@dariayurko977]

Як завжди, на висоті!

[@user-rc4yd1kx4t]

Спасибо!

[@Dbond1979]

Спасибо

[@velobarahlo]

спасибо

[@evrozah1]

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

[@__-qk1jr]

ПОЕХАЛИ! Футболка топ

[@FreelancerLifeStyle]

Спасибо!

[@MegaTesei]

Интересная тема, чувствую, что непростая. Спасибо, что разделил видео.

[@zmeygorynych5684]

Оччччень круто!

[@FreelancerLifeStyle]

Я рад!

[@Dmytro-DIY]

Grid - Great!

[@user-lq6sn5pe7t]

круто👍👍👍👍👍

[@MegaTesei]

Спасибо. Хотел бы, чтобы появилось видео про float, таблицы и семантику.

[@detro1821]

это не актуально

[@SergAlexson]

Спасибо вам! Очень классные уроки!

[@user-fv1qs6ur2h]

Жду продолжения блокбастера CSS Grid Layout.

[@FreelancerLifeStyle]

В работе)

[@danilablenda3008]

Ты молодец!!!)) Отлично рассказываешь. Жду новых видосов!!

[@FreelancerLifeStyle]

Спасибо!

[@_Al_Kuznec]

Очень интересно. Спасибо . Все видео отличные!

[@FreelancerLifeStyle]

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

[@bohdandudchenko939]

Благодарю )

[@LordOzzy1986]

Вдохновения, Благополучия, Процветания! Спасибо за потрясающий курс.

[@arima3918]

Незачто бро, обращайся

[@ARTPROGRAMS]

Очень круто объясняешь гриды👍

[@user-tw7ox8dd2b]

Я ствлю лайк сразу же не смотря видио!) Спасибо тебе во многом помог нам!

[@FreelancerLifeStyle]

Я рад!

[@valPhonker]

Круто

[@FreelancerLifeStyle]

Спасибо!

[@qwe-rty-]

Спасибо за столь долгожданный видосик😁

[@user-tg1ge6oi2v]

пушечка как обычно))

[@GoldMackgm]

Огонь! ) Сделай еще видео про CSS переменные, нативные, твое мнение, можно ли уже использовать и т.д.

[@ROVbeard]

Привет. Помню года 2 назад, радостный такой, перешел на гриды и потом перевёрстывал пару сайтов, т.к. не оговорил с клиентами детальный список поддерживаемых браузеров и получил пакет скринов разъехавшихся страниц в IE9 (!) Так что чудесный функционал конечно, очень удобная идея, но уже столько лет прошло, а ситуация особо не поменялась - пока что довольно большой процент пользователей сидит в браузерах не поддерживающих гриды. Так что лично моё мнение - пока что начинающим верстальщикам, не смотря на удобство гридов, бездумно их везде применять не следует, а лучше всего, на сегодня, вообще обойтись без них, тем более что многие решения довольно просто решаются с помощью flex-box.

[@tatianarekun8345]

Спасибо! Очень крутое объяснение темы

[@bulletsFly]

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

[@dimaburichin7726]

Поехали! Тема нужная но вот пока опасаюсь я че то переводить проекты на grid много свойств не поддерживается браузерами и выше упомянутые баги тоже фиксятся не так быстро. Но знать надо. Спасибо за видео.

[@FreelancerLifeStyle]

Все верно применяем с умом

[@Upset0990]

Подписка лайк и звоночек прям!

[@whoisleshalight8514]

Привет, спасибо

[@crazybogdancool709]

Самий кращий ютубер!

[@True_Ulatim]

Grid дуже сильно схожий на старий дідовський метод display: table. Добре, що я його трохі вчив, тепер сподіваюсь опанувати grid буде простіше.

[@FreelancerLifeStyle]

Це так

[@nikolay1875]

Лайк:) Посмотрю потом

[@FreelancerLifeStyle]

Надеюсь)

[@klmnprst777]

А точно все поддерживает и уже во всю можно, на мобильниках проблем не будет? Где то пол года назад у вас спрашивал, вы мне посоветовали флексы пока вместо гридов

[@denvanrain8793]

Как всегда - крутяк! Ждем продолжения!

[@FreelancerLifeStyle]

Спасибо!

[@deevue_sews]

хорошо

[@dimalepel]

Добрый день. Подскажите, пожалуйста, какой скринсейвер вы используете?

[@em6663]

smatryu iz Baku. spasibo za uroki ;)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-en4cc9jg5c]

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

[@ghost8652]

LIKE, не глядя...

[@user-lt7xi3cj9e]

Thank you))

[@user-dr7qv9yh8i]

Спасибо! Жду продолжения!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-fs9th3sr9g]

Молодец Жека

[@FreelancerLifeStyle]

Спасибо!

[@user-vq8wp6gc3d]

Решил пойти не по порядку плейлистов и перелетел от середины css твоего курса к ознакомлению с GRID. И пока никакой болтанки в голове от этих перескоков нет. Укладывается пока нормально

[@ThevideOoLoadeR]

Как всегда - топ. Пошёл смотреть дальше!)

[@MaxBondarenko]

Спасибо за прекрасную подачу материала! Дякую)

[@user-kb9gq1lz7d]

Дуже дякую!