CSS Grid Layout. Кроссбраузерность. Grid и Flex. Основные понятия.
ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2020
- Что же такое 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
🤟 Живи, а работай в свободное время! ©
🤟 Весь плейлист CSS Grid Layout th-cam.com/video/GV92IdMGFfA/w-d-xo.html
🔴 Получить доступ к плюшкам + поддержать канал: 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
Привет, очень нужен курс по вёрстке интернет магазина,
Как сделать карточку товаров с корзиной (которая изменяется в зависимости от добавление товара в корзину), с возможностью добавление в избранное и выставлением рейтинга.
Как сделать? Сверстать вручную или использовать какие то CMS вроде Opencart и тд.
Как сделать, подскажи пожалуйста. (В виде курса, очень нужно).
Как сделать рабочее поле регистрации пользователя с разным уровнем доступа.
а что за музыка в конце видео?
Сделай пожалуйста плейлист по foundation, на просторах его вообще нету
Прошу прощения. Что такое префиксер и как его найти 🤣
Именно благодаря Вам, я понял, как правильно использовать те или иные технологии, а конкретно Flexbox (до сих пор порой пользуюсь Вашей шпаргалкой, если что-то забываю), с удовольствием смотрю Ваши стримы, где черпаю для себя новые знания и в конце концов, посмотрев видео из цикла знакомства с фрилансом, обозначил нужный мне вектор и то, что мне нужно сделать, чтобы начать зарабатывать.
Спасибо вам за ваш контент. Я думаю, что любому контент-мейкеру это было бы очень приятно, но в плане подачи материала вы действительно делаете то, что делают не все Ваши коллеги по цеху, ютуберы веб-программисты. Удачи и процветания.
как успехи в веб?
Привет! Есть ли сейчас заработок с фриланса? или твоя цель - устройство в компанию джуном? Сколько по сумме время обучения заняло?)
Шановний Євгенію,
Я хочу щиро подякувати вам за ваші безкоштовні уроки з веб-розробки. Ваша велика щедрість та бажання допомагати іншим насправді вражають мене.
Женя, спасибо тебе за твое творчество , ты делаешь жизнь многих людей лучше . В интернете нет настолько качественного бесплатного курса по Front-End разработке как у тебя, вероятно, даже платные будут ниже .
Так и есть, я сейчас прохожу платный курс, он реально не дотягивает до контента на этом канале.
Очень понятно , полезно.
Нравятся абсолютно все видео!
Монтаж очень крутой, что прям кайф смотреть!
Я рад!!
Спасибо большое!! Твой канал стал для меня энциклопедией! Читала много всего в поисках ответов и в голове получилась каша из теории без понимания, где и как это использовать, а благодаря твоим урокам все стало понятно, легко и приятно!
Учусь , а в свободное время тоже учусь, сплю тоже учусь , сижу в тауалете учусь , ему учусь и все равно самый тупой 🤣
Ты не один такой 😜
@@nilufarabylova3897 и ты тоже
+ как успехи спустя год?
Як успіхи?)
@@hannanesterova9200 Cтал мидлом, работаю в кайф, сохрнаяю ворк лайф беленс
За день больше знаний чем за 3 года в шараге.
Я рад!
Видео отличное! Автор - мастер!!! Так объяснять, быстро и доходчиво, это талант!! Спасибо за старания и удачи
Пожалуйста! Скоро следующая часть.
Евгений, мы Все рады, что жизнь и обучение продолжаются. И с нетерпением ждём очередных твоих подвигов (ударение на О а затем и на И) и наших продвигов с твоей помощью. Спасибо за труд!
Пожалуйста! Рад что полезно!
Спасибо большое за то что стараешься делать уроки максимально понятными для любого человека , Ты просто лучший !!!
Продолжайте) благодаря вам сдал экзамен в колледже по html & css)
Класс началось, буду ждать следующего выпуска. Спасибо за полезный контент.
Жека, все отлично! Смотрю и повторяю за тобой. Все доходчиво объясняешь! Главное практиковаться по-больше и все будет чики-пуки. Вчера смотрел стрим и знаешь...ты мотивируешь учиться дальше! Спасибо !
Вдохновения, Благополучия, Процветания! Спасибо за потрясающий курс.
Незачто бро, обращайся
Качественно, полезно, информативно. Спасибо, продолжайте в том же духе
Спасибо за годный урок. Жду следующее видео)))
Спасибо за столь долгожданный видосик😁
У тебя был курс по флексу но я очень ждал грида. Пасибо
Пожалуйста!
Ты очень сильно прокачался в качестве видео, за год блоггинга! Это очень круто и желаю дальнейшего продвижения в этой теме!
Спасибо!
Спасибо Евгений! Как всегда на высоте.
Пожалуйста!
Привет! Спасибо за очередную годноту! Делай побольше разговорных и мотивирующих роликов
Спасибо ждали.
Ты всегда объясняешь все и плюс качественно. Поэтому ты лучший. Да ещё и шутки топ.
Уже много роликов посмотрел твоих очень круто все, очень нравится. А вот никогда как-то не обращал внимания ну суть того что ты всегда говоришь в конце ролика, а сегодня вот понял) Спасибо
Интересная тема, чувствую, что непростая. Спасибо, что разделил видео.
Четко,понятно,профессионально. Материал отлично спланирован и подан.Топовое качество.
Спасибо за уроки. Они очень понятны и полезны
Пожалуйста!
Спасибо вам! Очень классные уроки!
Ммммм.... Гриды! Как долго я к вам шел! Женя, отдельное спасибо за шпаргалку!
Ось і я дійшов до грідів. Як завжди подача неперевершена!
Как всегда - крутяк! Ждем продолжения!
Спасибо!
Как всегда - топ. Пошёл смотреть дальше!)
В данный момент учусь на платном курсе и каждую тему дополнительно разбираю на видео с данного канала, так как там практически ничего не понятно
Спасибо тебе большое за контент)
edu.fls.guru/
Очень круто объясняешь гриды👍
Огонь! )
Сделай еще видео про CSS переменные, нативные, твое мнение, можно ли уже использовать и т.д.
Очень интересно. Спасибо . Все видео отличные!
Спасибо большое!
срочно весь курс прямо сейчас! Шутка)
но мне сейчас правда очень нужны годные уроки по гридам
Ты молодец!!!)) Отлично рассказываешь. Жду новых видосов!!
Спасибо!
Спасибо! Очень крутое объяснение темы
Огромное спасибо Женя!
Спасибо! Жду продолжения!
Пожалуйста!
Как раз прохожу это на курсах! Бомба!
Супер!
Лучший канал по верстке!
Клевая подача и объяснение!)
Спасибо!
Дуже Хороший урок, Все чітко і Конкретно... Дуже Дякую Вам
Ооо наконец-то👍👍👍
Да)
Спасибо, новый для меня материал, буду вникать!
Пожалуйста!
Вместо того чтобы платить большие деньги нн Курсам, Клянусь это лучший канал , + Беспалатно Вы Лучший🔥
Как всегда топ!👍👍👍
Спасибо!
как всегда выпуск на уровне!)
Спасибо за прекрасную подачу материала! Дякую)
Я ствлю лайк сразу же не смотря видио!) Спасибо тебе во многом помог нам!
Я рад!
Жека, спасибо! Было полезно
Пожалуйста!
Материал что надо! Спасибо было интересно
Як завжди, на високому рівні!
Дякую!
Супер!!! Нова заставка топпп!!!
Жду продолжения по grid
интересненько... ждем дальше)
Жека ты вдохновляешь🔥🔥🔥🔥🔥
Я рад!
Спасибо за полезный контент
Привет! Спасибо за годный контент!
Когда js/jquery?
По кайфу, благодаря тебе получил rising talent на Upwork
Супер! Я рад!
Благодарю Вас за видео.
Пожалуйста!
Як завжди, на висоті!
Спасибо)
Чем-то табличную верстку начала двухтысячных напомнило))))
Информативное видио! Благодарю
Спасибо за видео 👍
Супер выпуск.
Ты лучший в своем деле!!
Ничего не понимаю, но все равно каждый раз смотрю 🤣
Ахаха, я тоже)))
Дождались!!!!!
Да!
Ура, лучший блогер по верстке сделает лучший гайд по Гридам и проекты будут сдаваться бистрее)
Постараюсь)
@@FreelancerLifeStyle Хотел спросить. А есть видео где рассуждения где лучше применять Флексбокс, а где Гриды, и почему, с примерами? А то у меня сакральный вопрос: нафига нужны гриды. Помню что-то было про применения Грид в каталогах (как приоритетный вариант), но вопрос "Зачем" все же актуален для отдельного видео. Пересматриваю плейлист, так что может еще не дошел до ответа :). Спасибо!
Круто, круто. спасибо большое! Как всегда, донесение информации на высшем уровне. Не в обиду другим, но лучший поставленный голос, из всех кто обучает IT.
Спасибо!
@@FreelancerLifeStyle Спасибо вам, наш Народны учитель.Есть по английскому Народный учитель на просторах TH-cam, вы я думаю уже для многих стали по IT. Каждый, кто благодаря вам войдет в сферу IT, просто будет обязан поддерживать канал. Еще раз спасибо, мы все от вас буде ждать новых видео.
Спасибо, Жека!!!
Позитивный паря))) Крутой канал! Учу JS, но ты меня реально замотивировал и на вёрстку)))
Пы.Сы. Настолько доступного изложения контента я ещё не встречал в рунете. Круто.
без знаний html, css не вижу смысла учить js
@@evgeniyprowork знаю на базовом уровне, но решил углубиться
Класс. Просто супер.
Самий кращий ютубер!
Ви були би крутим актором! Все чотко!
пушечка как обычно))
Спасибо Жека ! я вижу мой ранний комментарий не прошел стороной ! ))
Все читаю)
Спасибо. Хотел бы, чтобы появилось видео про float, таблицы и семантику.
это не актуально
Супер, спасибо!
Если не вы, то никто) Спасибо Жека от души
Пожалуйста!
Оччччень круто!
Я рад!
Жду продолжения блокбастера CSS Grid Layout.
В работе)
Спасибо! 👍✨
Perfect! Спасибо!
2 минуты назад вышло. Ставлю лайк даже не посмотрев
Спасибо!
Это божественно!) перед собеседованием выделила час времени на изучение этого плейлиста , будучи совершенно незнакомой с гридами, и в тесте при приеме ответила на все вопросы по этой теме 😱. Это невероятно)) в самую точку! С полоборота понятно и тема перестает пугать))
Благодарю друг!
Обучайся, развивайся и, и, и никогда не сдавайся ))))) Начинал изучать "сайтостроение" год назад с языков PHP и JS (некому было подсказать с чего и как начинать) немого въехал в тему, думаю начну сейчас делать крутые сайты, и столкнулся версткой... И слава Богу что нашел этот канал. Это было прям открытие, столько полезной практической информации. Просидел тут 4 месяца, пересмотрел почти все видео. Закончил на флексе и вот ГРИДЫ... Опять надо учить )))) Вообщем. Евгению хочу сказать ОГРОМНОЕ СПАСИБО за такой колоссальны труд. А тем кто учит пожелать успехов и не останавливаться в процессе обучения - идти до конца!!!
P.S.: Подписался на patreon - за 2 бакса получил целую кучу плюшек в виде полезного кода и макетов + еще и письмо прислали с настройками по галпу. Бери ставь да пользуйся. Тем кто хочет экономить время - рекомендую. Цена бросовая, а контент очень мощный.
уже работате в вебе?
@@silenciomar Так, но на фрілас проєктах.
@@artgas_pro на яких сайтах начинали?
Решил пойти не по порядку плейлистов и перелетел от середины css твоего курса к ознакомлению с GRID. И пока никакой болтанки в голове от этих перескоков нет. Укладывается пока нормально
круто👍👍👍👍👍
LIKE, не глядя...
ПОЕХАЛИ!
Футболка топ
Спасибо!
А точно все поддерживает и уже во всю можно, на мобильниках проблем не будет? Где то пол года назад у вас спрашивал, вы мне посоветовали флексы пока вместо гридов
Женя, привет! Можешь как-нибудь сделать гайд по внедрению критического css?
Лайк:) Посмотрю потом
Надеюсь)
Поехали! Тема нужная но вот пока опасаюсь я че то переводить проекты на grid много свойств не поддерживается браузерами и выше упомянутые баги тоже фиксятся не так быстро. Но знать надо. Спасибо за видео.
Все верно применяем с умом
Спасибо!