CSS Grid верстка - Введение. Что такое гриды и зачем они нужны.
HTML-код
- Опубликовано: 29 июн 2017
- Всем привет в этом видео я расскажу вам о CSS Grid layout. Этот урок некое введение в гриды. Я покажу как сделать простую структуру сайта используя первые свойства CSS Grid layout.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
У меня не хватает слов выразить мою благодарность. Я так давно ждал уроки по Grid. Отлично и чётко все объяснил , надеюсь ты снимешь отдельный цикл уроков по нему или практику как с flexbox'ом. Спасибо
Если хотите обязательно сниму!
Ждём с нетерпением!
хотим
1:30 Flexbox тоже позволяет менять расположение обектов не меняя html.
Спасибо, братец. Мне очень нравятся все твои видео. Будь здоров!!!
Супер! Урок очень понравился, хочу продолжение!)
Спасибо, ставьте лайк, наберем 100 лайков и будет следующее видео!
Лайк поставил сразу) хотел узнать, есть ли в планах уроки по какому-то из фреймворков, типа Yii2, Laravel,...?
Спасибо за все уроки, успехов тебе и конечно продолжения )
Ого, я впечатлен как ловко и быстро, а самое главное, что предельно просто объясняешь, спасибо огромное за проделанную работу.
Спасибо за обратную связь!
Бро, ты один из лучших на ютубе, кто делает подобные видео. Никакой воды, все емко и по сути. Это твоя фишка - не потеряй ее. Подписка и лайк.
Спасиб большое. Всегда так и старался
Круто! Спасибо за видос )
Пожалуйста, надоюсь очень полезно!
продолжайте
Супер понятно , спасибо !
Спасибо за клёвый урок, и полезную инфу!
чувак, ты реально крут! спасибо тебе большое!
Огромное спасибо ;)
Спасибо, понятнее чем у других
Редко оставляю комментарии, но тут не могу не сказать спасибо. Несмотря на то, что у тебя не самое большое количество подписчиков - формат видео и обучения одно из лучших. Удачи тебе и прироста подписоты. Просто спасибо.
все классно👍бро спасибо✊тебе огромное
Продолжай в том же духе!
Спасибо за уроки!
Спасибо большое! Обязательно буду продолжать
круто, спасибо , хочу еще верстку по ГРИДАМ . тебе спасибо
Спасибо!
Отличный урок п огрид, жду подобных уроков, очень все классно объясняет
Пожалуйста сделайте видео о том как создать поиск по сайту, различные варианты поиска и подробно... почему прошу Вас, да потому что у Вас талант доходчиво объяснять!! 👍🏽👍🏽👍🏽
отличный обзор, мне понравилось!
Ты красавчик)
Спасибо за похвалу!
Спасибо! Отличный урок)
Это очень и очень радует
Спасибо за ролики! Пожалуй, первый годный канал после ухода Sorax`a
Спасибо большое!! Это очень радует и мотивирует делать еще больше и качественнее новые видео!
Жаль что зоракс ушёл, качественно делал
да уж Sorax лучший!
@@indeolok1623 Sorax, конечно, хорош, но про Grid рассказал очень скомкано и не особо понятно для новичка. Здесь доступнее и подробнее получилось.
Оч крутой инструмент. Спасибо
И вам спасибо!
Шикарное видео, научи верстать!!!!
спасибо
Emmet код для HTML разметки:
_.grid>.grid-item{item-$}*9_
Я впечатлен. Вот это да! Не думал, что вот так легко и быстро можно набросать макет сайта. Жаль, что только один видео урок о CSS Grid.
будет еще много уроков по гридам. Мне нужно время что б их составить!
Круто, интерсно продолжение, можно и практику.
Да сделаем
Спасибо, всё просто и понятно! Только у меня в Опере почему-то не сработал медиа запрос, пришлось гуглить и добавить
@media screen and (max-width: 600px),
only screen and (max-device-width : 600px).
Martial arts and lulz спасибо! И в хроме помогло.
У меня и это не помогло, в чем прикол может быть?
После того, как расписываю .container in css верстка разбегается, отражается только header and footer. Firefox обновлен. В Гугл Хроме та же история
Пили продолжение! Мы ждём) Урок улёт, только объясняй всё помедленнее :D
Так я наоборот что бы видео было не таким длинным, вырезаю ненужные моменты. Или говорю очень быстро?
важные моменты лучше разжёвывать помедленнее, чтобы по 5 раз не перематывать)
А так всё отлично, вижу, что вырезаешь лишнее, молодец)
Спасиб большое! Подскажите например какие важные моменты в этом видео я плохо объяснил? Просто что б я понимал. Просто для меня это вообще очевидные моменты, которые как кажется объяснять вообще не нужно, а вот новичку это как раз и не понятно.
я по поводу template не сразу понял и ещё, так, для улучшения: оставляй ссылочку на материал, с подробным описанием свойств используемых в видео)
не надо медленнее! Подача 10/10!
*Это бомба, если не трудно, так же в свой монере ( без воды с монтажем ) сверстай пожалуйста сайт адаптивный, простенький но с меню, которое тоже будет адаптивное, спасибо за ранее!*
Хорошо
ну . неплохо
Почему когда ставишь только один footer в areas он улетает?
ждём новое видео!!!!
Будет!
Здравствуйте,Алексей!Помогите ,пожалуйста ,разобраться:смотрел Ваши видео ,все в точности повторил, но ни гряды ни flexbox цифры на ряды не меняют.Может быть нужно добавить какие -то плагины или расширения в SublimeText.При этом простая верстка сайта(другое видео)все замечательно получилось.Заранее благодарен.
Владимир Попов разобрался?
Очень полезно. А вы собираетесь еще видео про грид делать?
Да видео о гридах еще будет и не одно
подскажите пожалуйста что это у вас за программа черная такая где вы код пишите? Хочу начать изучать верстку для себя, а в чем набирать код и вообще в какой программе это делается не знаю. Можете еще ссылки на уроки для новичков с полного 0 посоветовать, буду рад)
Sublime text
Web Developer Blog спасибо
10 роликов в 11 минутном видео? серьезно? За видео огромное спасибо, в 2к18 IE11 все еще не поддерживает, но с рекламкой все таки нужно быть поскромнее, а то у меня уже WIX головного мозга
3:28 Какую клавишу нажать чтобы номера сами так проставились? Искал в шпаргалках по Emmet - не нашел
Это вырезка
Круто!) можно ли совместить CSS Grid и Flexbox?
Добрый день, можно, но зачем? Лучше что то одно использовать уже
Добрый день,гриды для расстановки блоков ,а флексы для элементов внутри блоков
Супер. Жаль, что не все браузеры поддерживают грид
Над этим сейчас усердно работают!
скажем больше, ее поддерживают только последние версии браузеров. через 5-6 лет может станет актуальным.
И сейчас актуально, если не критична поддержка 9-го IE. Остальные браузеры обновляются автоматически.
Сейчас ты один из лучших блогеров. Ты Гоша и webdev мастер css не делает видосы хауди скатился на дно видео чисто для одного просмотра
это что, типа бутстрап больше не нужен или как?? в каких случаях используют гриды?
Ни в каких, его поддержка очень слабая, но когда выйдет, это буит мощно
В Chrome в режиме разработчика блоки не перемещаются при изменении разрешения, в других браузерах все норм (кроме Edge и Explorer конечно же), если кто столкнется с этим, имейте ввиду. P.s. урок отличный!
Спасибо, очень радует что понравилось)
Перемещаются, я смотрел.
Я тоже смотрела. Перемещаются - если просто режим разработчика. А если в нем нажать просмотр для мобилок, то почему-то уже не перемещаются. Для мобилок показан вид с колонками слева-справа. Может просто, на мобилках браузеры еще не поддерживают гриды? Я еще не в курсе, только сегодня начала изучать эту тему.
стащил +
body {text-align: center;} почему то не сработало..
Будет продолжение?
Да все будет, сейчас времени нет(
Будем ждать)
Пожалуйста, не торопись при объяснении. А то вон забыл разметку, я то думал, в чем подвох. Не торопись, плз.
В остальном спасибо, лайк
Спасибо! Да постараюсь, просто в час ночи видео снимал и как то да, про псевдонимы забыл.
Отлично. А теперь назовите хотя бы одну причину не использовать вместо этого флекс, таблицы или банальные флоаты. Самая главная суть не раскрыта ни капли - В ЧЕМ ИМЕННО отличие гридов от всего остального? ЗАЧЕМ мне их использовать вместо любой подходящей старой технологии? Этого я из видео как раз таки не понял, а доки найти в сети не проблема.
А я делаю через @media)))
скажите, а IE это все работает?
совершенно нет(
ну и так то в IE мало что вообще работает
В IE 10 и IE 11 grid должен работать с префиксом -ms-
gtid это вещь я смотрю
как оно на mobile?
Будет отлично!
ok
Лайк, но не рассказали какие браузеры поддерживают css гриды
Хочу об этом отдельно рассказать так как есть много нюансов)
На caniuse.com вбей CSS-Grid и все увидишь
все красное. про кроссбраузерность можно забыть. через 5-6 лет может и станет актуальным. не интересно, вообщем.
>> "все красное. про кроссбраузерность можно забыть. через 5-6 лет может и станет актуальным. не интересно, вообщем."
Ваш прогноз провалился :)
что актуальная тема? просто начал учить бутстрап4, флексы и вот наткнулся на гриды. лучше сразу с них начать?
8:25 перелистнул страницу
...
"двухмерное измерение" касается и flex, если че
Табличная верстка в новой оболочке. Это разрабатывали депутаты госдумы?
Конечно!
Депутаты не разрабатывают. Они распиливают.
Это же мармок
не требуется лепить кучу кода
Именно так)
обяснение не очень(....
неоченто понял слишком быстро комментируеш
Стараюсь что бы не было нудных пауз)
лучше не снимал бы чем опубликовал ускоренное видео
сука реклама каждые 30 сек
Да ну в п**у одна реклама.. диз за это
дохрена рекламных вставок для 11 минут, тебе так не кажется?
Вы бесплатно смотрите урок, верно?
тут такое не прокатывает))) это ютуб детка, если вставил больше одной рекламы лови хейт. С аудиторией в 10к себе позволять это зашквар))
Я собираю адекватную и думающую аудиторию, показываю очень подробно нужный для работы материал и все это бесплатно, взамен я лишь прошу смотреть рекламные вставки, которые показываются ну уж точно не каждый раз. Будьте лояльнее либо купите подписку ютуб ред. Ну либо идите на курсы в вашем городе и платите за курсы преподавателю, в данном же случае вам нужно просто закрыть рекламную вставку через 5 секунд. И да, это образовательный контент, так что даже такие слова как "зашквар" тут неуместны.
Интересно, а мне вообще без рекламных вставок ролик показало. Только я сама паузу часто нажимала и писала себе код и сразу в браузере проверяла)) Так что время урока для меня растянулось за счет практики.
Ужасное объяснение