Тёмный

CSS Grid верстка - Введение. Что такое гриды и зачем они нужны. 

Web Developer Blog
Подписаться 246 тыс.
Просмотров 62 тыс.
50% 1

Всем привет в этом видео я расскажу вам о 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
========================================================

Опубликовано:

 

29 июн 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 137   
@user-jv1vi3ti6v
@user-jv1vi3ti6v Год назад
Спасибо, братец. Мне очень нравятся все твои видео. Будь здоров!!!
@artursteirumniks1265
@artursteirumniks1265 7 лет назад
У меня не хватает слов выразить мою благодарность. Я так давно ждал уроки по Grid. Отлично и чётко все объяснил , надеюсь ты снимешь отдельный цикл уроков по нему или практику как с flexbox'ом. Спасибо
@SuprunAlexey
@SuprunAlexey 7 лет назад
Если хотите обязательно сниму!
@artursteirumniks1265
@artursteirumniks1265 7 лет назад
Ждём с нетерпением!
@eugene7289
@eugene7289 7 лет назад
хотим
@alishert7239
@alishert7239 6 лет назад
1:30 Flexbox тоже позволяет менять расположение обектов не меняя html.
@user-ox4ho8ig7l
@user-ox4ho8ig7l 28 дней назад
все классно👍бро спасибо✊тебе огромное
@yuriyzadorozhnyi3849
@yuriyzadorozhnyi3849 Год назад
Супер понятно , спасибо !
@marrius3736
@marrius3736 6 лет назад
Спасибо за клёвый урок, и полезную инфу!
@maxdzyubak
@maxdzyubak 6 лет назад
Спасибо за все уроки, успехов тебе и конечно продолжения )
@vadymkean2405
@vadymkean2405 6 лет назад
Ого, я впечатлен как ловко и быстро, а самое главное, что предельно просто объясняешь, спасибо огромное за проделанную работу.
@SuprunAlexey
@SuprunAlexey 6 лет назад
Спасибо за обратную связь!
@user-uv6wz1kg3t
@user-uv6wz1kg3t 7 лет назад
Супер! Урок очень понравился, хочу продолжение!)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо, ставьте лайк, наберем 100 лайков и будет следующее видео!
@user-uv6wz1kg3t
@user-uv6wz1kg3t 7 лет назад
Лайк поставил сразу) хотел узнать, есть ли в планах уроки по какому-то из фреймворков, типа Yii2, Laravel,...?
@webgtx
@webgtx 4 года назад
Спасибо, понятнее чем у других
@sherinar9358
@sherinar9358 4 года назад
отличный обзор, мне понравилось!
@id77777777
@id77777777 6 лет назад
чувак, ты реально крут! спасибо тебе большое!
@vladwell230
@vladwell230 7 лет назад
Круто! Спасибо за видос )
@SuprunAlexey
@SuprunAlexey 7 лет назад
Пожалуйста, надоюсь очень полезно!
@user-vt5nx3fb1h
@user-vt5nx3fb1h 5 лет назад
Отличный урок п огрид, жду подобных уроков, очень все классно объясняет
@digitalturkistan1857
@digitalturkistan1857 7 лет назад
продолжайте
@vladisavvdovin6501
@vladisavvdovin6501 6 лет назад
Огромное спасибо ;)
@max_samusevich
@max_samusevich 7 лет назад
Спасибо! Отличный урок)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Это очень и очень радует
@timursalavatov4430
@timursalavatov4430 6 лет назад
Редко оставляю комментарии, но тут не могу не сказать спасибо. Несмотря на то, что у тебя не самое большое количество подписчиков - формат видео и обучения одно из лучших. Удачи тебе и прироста подписоты. Просто спасибо.
@alexandershulga2636
@alexandershulga2636 5 лет назад
круто, спасибо , хочу еще верстку по ГРИДАМ . тебе спасибо
@Zver64
@Zver64 7 лет назад
Бро, ты один из лучших на ютубе, кто делает подобные видео. Никакой воды, все емко и по сути. Это твоя фишка - не потеряй ее. Подписка и лайк.
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасиб большое. Всегда так и старался
@dr.rastafarai7548
@dr.rastafarai7548 7 лет назад
Продолжай в том же духе! Спасибо за уроки!
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо большое! Обязательно буду продолжать
@ANAflash007
@ANAflash007 5 лет назад
Пожалуйста сделайте видео о том как создать поиск по сайту, различные варианты поиска и подробно... почему прошу Вас, да потому что у Вас талант доходчиво объяснять!! 👍🏽👍🏽👍🏽
@user-su3ef5cb8p
@user-su3ef5cb8p 6 лет назад
Оч крутой инструмент. Спасибо
@SuprunAlexey
@SuprunAlexey 6 лет назад
И вам спасибо!
@user-gf2ki4fe6v
@user-gf2ki4fe6v 6 лет назад
Emmet код для HTML разметки: _.grid>.grid-item{item-$}*9_
@user-ol3ns7ic6n
@user-ol3ns7ic6n 6 лет назад
Шикарное видео, научи верстать!!!!
@user-kr7zq6dt3z
@user-kr7zq6dt3z 4 года назад
Спасибо!
@artemzaremba6391
@artemzaremba6391 7 лет назад
Ты красавчик)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо за похвалу!
@tonystark862
@tonystark862 6 лет назад
Круто, интерсно продолжение, можно и практику.
@SuprunAlexey
@SuprunAlexey 6 лет назад
Да сделаем
@kotelevichvictor
@kotelevichvictor 6 лет назад
Я впечатлен. Вот это да! Не думал, что вот так легко и быстро можно набросать макет сайта. Жаль, что только один видео урок о CSS Grid.
@SuprunAlexey
@SuprunAlexey 6 лет назад
будет еще много уроков по гридам. Мне нужно время что б их составить!
@ZeniRUS
@ZeniRUS 7 лет назад
Спасибо за ролики! Пожалуй, первый годный канал после ухода Sorax`a
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо большое!! Это очень радует и мотивирует делать еще больше и качественнее новые видео!
@dispute777
@dispute777 6 лет назад
Жаль что зоракс ушёл, качественно делал
@indeolok1623
@indeolok1623 5 лет назад
да уж Sorax лучший!
@user-xq4hc2nu6i
@user-xq4hc2nu6i 4 года назад
@@indeolok1623 Sorax, конечно, хорош, но про Grid рассказал очень скомкано и не особо понятно для новичка. Здесь доступнее и подробнее получилось.
@alexeykornev4048
@alexeykornev4048 5 лет назад
спасибо
@lhr_arms
@lhr_arms 4 года назад
ну . неплохо
@it-man3600
@it-man3600 6 лет назад
*Это бомба, если не трудно, так же в свой монере ( без воды с монтажем ) сверстай пожалуйста сайт адаптивный, простенький но с меню, которое тоже будет адаптивное, спасибо за ранее!*
@SuprunAlexey
@SuprunAlexey 6 лет назад
Хорошо
@agutinoff
@agutinoff 6 лет назад
Спасибо, всё просто и понятно! Только у меня в Опере почему-то не сработал медиа запрос, пришлось гуглить и добавить @media screen and (max-width: 600px), only screen and (max-device-width : 600px).
@evgeny-chugaev
@evgeny-chugaev 6 лет назад
Martial arts and lulz спасибо! И в хроме помогло.
@user-qh6si2fp7p
@user-qh6si2fp7p 5 лет назад
У меня и это не помогло, в чем прикол может быть?
@user-ke9yt3yu4y
@user-ke9yt3yu4y 7 лет назад
ждём новое видео!!!!
@SuprunAlexey
@SuprunAlexey 7 лет назад
Будет!
@mariabukalova7715
@mariabukalova7715 6 лет назад
Очень полезно. А вы собираетесь еще видео про грид делать?
@SuprunAlexey
@SuprunAlexey 6 лет назад
Да видео о гридах еще будет и не одно
@user-to7kw6ym7e
@user-to7kw6ym7e 5 лет назад
Здравствуйте,Алексей!Помогите ,пожалуйста ,разобраться:смотрел Ваши видео ,все в точности повторил, но ни гряды ни flexbox цифры на ряды не меняют.Может быть нужно добавить какие -то плагины или расширения в SublimeText.При этом простая верстка сайта(другое видео)все замечательно получилось.Заранее благодарен.
@Moter1997
@Moter1997 4 года назад
Владимир Попов разобрался?
@vffuunnyy
@vffuunnyy 7 лет назад
Пили продолжение! Мы ждём) Урок улёт, только объясняй всё помедленнее :D
@SuprunAlexey
@SuprunAlexey 7 лет назад
Так я наоборот что бы видео было не таким длинным, вырезаю ненужные моменты. Или говорю очень быстро?
@vffuunnyy
@vffuunnyy 7 лет назад
важные моменты лучше разжёвывать помедленнее, чтобы по 5 раз не перематывать) А так всё отлично, вижу, что вырезаешь лишнее, молодец)
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасиб большое! Подскажите например какие важные моменты в этом видео я плохо объяснил? Просто что б я понимал. Просто для меня это вообще очевидные моменты, которые как кажется объяснять вообще не нужно, а вот новичку это как раз и не понятно.
@vffuunnyy
@vffuunnyy 7 лет назад
я по поводу template не сразу понял и ещё, так, для улучшения: оставляй ссылочку на материал, с подробным описанием свойств используемых в видео)
@RslVysh
@RslVysh 6 лет назад
не надо медленнее! Подача 10/10!
@Evillidan
@Evillidan 6 лет назад
подскажите пожалуйста что это у вас за программа черная такая где вы код пишите? Хочу начать изучать верстку для себя, а в чем набирать код и вообще в какой программе это делается не знаю. Можете еще ссылки на уроки для новичков с полного 0 посоветовать, буду рад)
@SuprunAlexey
@SuprunAlexey 6 лет назад
Sublime text
@Evillidan
@Evillidan 6 лет назад
Web Developer Blog спасибо
@maksimometcinskii530
@maksimometcinskii530 5 лет назад
10 роликов в 11 минутном видео? серьезно? За видео огромное спасибо, в 2к18 IE11 все еще не поддерживает, но с рекламкой все таки нужно быть поскромнее, а то у меня уже WIX головного мозга
@fazik28
@fazik28 5 лет назад
Сейчас ты один из лучших блогеров. Ты Гоша и webdev мастер css не делает видосы хауди скатился на дно видео чисто для одного просмотра
@den8790
@den8790 6 лет назад
Почему когда ставишь только один footer в areas он улетает?
@sinaktenone9882
@sinaktenone9882 7 лет назад
Супер. Жаль, что не все браузеры поддерживают грид
@SuprunAlexey
@SuprunAlexey 7 лет назад
Над этим сейчас усердно работают!
@nighthunter28
@nighthunter28 6 лет назад
скажем больше, ее поддерживают только последние версии браузеров. через 5-6 лет может станет актуальным.
@Danil_Podchufarov
@Danil_Podchufarov 6 лет назад
И сейчас актуально, если не критична поддержка 9-го IE. Остальные браузеры обновляются автоматически.
@ericraudy
@ericraudy 5 лет назад
3:28 Какую клавишу нажать чтобы номера сами так проставились? Искал в шпаргалках по Emmet - не нашел
@maxgold1539
@maxgold1539 5 лет назад
Это вырезка
@yerzhanbeisembayev883
@yerzhanbeisembayev883 7 лет назад
Круто!) можно ли совместить CSS Grid и Flexbox?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Добрый день, можно, но зачем? Лучше что то одно использовать уже
@user-ii8tz2gm8x
@user-ii8tz2gm8x 7 лет назад
Добрый день,гриды для расстановки блоков ,а флексы для элементов внутри блоков
@uaplatformacomua
@uaplatformacomua 5 лет назад
После того, как расписываю .container in css верстка разбегается, отражается только header and footer. Firefox обновлен. В Гугл Хроме та же история
@user-hs9xc9gk9o
@user-hs9xc9gk9o 7 лет назад
В Chrome в режиме разработчика блоки не перемещаются при изменении разрешения, в других браузерах все норм (кроме Edge и Explorer конечно же), если кто столкнется с этим, имейте ввиду. P.s. урок отличный!
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо, очень радует что понравилось)
@user-ob9qo2xh1u
@user-ob9qo2xh1u 6 лет назад
Перемещаются, я смотрел.
@user-mz2rt1vo3k
@user-mz2rt1vo3k 6 лет назад
Я тоже смотрела. Перемещаются - если просто режим разработчика. А если в нем нажать просмотр для мобилок, то почему-то уже не перемещаются. Для мобилок показан вид с колонками слева-справа. Может просто, на мобилках браузеры еще не поддерживают гриды? Я еще не в курсе, только сегодня начала изучать эту тему.
@serialnagibator2514
@serialnagibator2514 6 лет назад
это что, типа бутстрап больше не нужен или как?? в каких случаях используют гриды?
@ilyafrontend237
@ilyafrontend237 6 лет назад
Ни в каких, его поддержка очень слабая, но когда выйдет, это буит мощно
@vasil-vasil
@vasil-vasil 4 года назад
gtid это вещь я смотрю
@offeecode7074
@offeecode7074 6 лет назад
стащил +
@yarolikiy
@yarolikiy Год назад
ok
@yalmeme
@yalmeme 5 лет назад
Отлично. А теперь назовите хотя бы одну причину не использовать вместо этого флекс, таблицы или банальные флоаты. Самая главная суть не раскрыта ни капли - В ЧЕМ ИМЕННО отличие гридов от всего остального? ЗАЧЕМ мне их использовать вместо любой подходящей старой технологии? Этого я из видео как раз таки не понял, а доки найти в сети не проблема.
@alibek5423
@alibek5423 7 лет назад
Пожалуйста, не торопись при объяснении. А то вон забыл разметку, я то думал, в чем подвох. Не торопись, плз. В остальном спасибо, лайк
@SuprunAlexey
@SuprunAlexey 7 лет назад
Спасибо! Да постараюсь, просто в час ночи видео снимал и как то да, про псевдонимы забыл.
@igorkiev34
@igorkiev34 7 лет назад
Лайк, но не рассказали какие браузеры поддерживают css гриды
@SuprunAlexey
@SuprunAlexey 7 лет назад
Хочу об этом отдельно рассказать так как есть много нюансов)
@ruslanmiftakhov5044
@ruslanmiftakhov5044 7 лет назад
На caniuse.com вбей CSS-Grid и все увидишь
@nighthunter28
@nighthunter28 6 лет назад
все красное. про кроссбраузерность можно забыть. через 5-6 лет может и станет актуальным. не интересно, вообщем.
@Line1624
@Line1624 6 лет назад
>> "все красное. про кроссбраузерность можно забыть. через 5-6 лет может и станет актуальным. не интересно, вообщем." Ваш прогноз провалился :)
@user-qs6ug2vx6k
@user-qs6ug2vx6k 6 лет назад
что актуальная тема? просто начал учить бутстрап4, флексы и вот наткнулся на гриды. лучше сразу с них начать?
@user-et3rw9wy4o
@user-et3rw9wy4o 5 лет назад
А я делаю через @media)))
@user-sk2dp1ob1n
@user-sk2dp1ob1n 4 года назад
...
@dr.rastafarai7548
@dr.rastafarai7548 6 лет назад
Будет продолжение?
@SuprunAlexey
@SuprunAlexey 6 лет назад
Да все будет, сейчас времени нет(
@dr.rastafarai7548
@dr.rastafarai7548 6 лет назад
Будем ждать)
@WrldsporteventsR.Y..V.1992
@WrldsporteventsR.Y..V.1992 4 года назад
body {text-align: center;} почему то не сработало..
@alanbuday86
@alanbuday86 6 лет назад
скажите, а IE это все работает?
@SuprunAlexey
@SuprunAlexey 6 лет назад
совершенно нет( ну и так то в IE мало что вообще работает
@Danil_Podchufarov
@Danil_Podchufarov 6 лет назад
В IE 10 и IE 11 grid должен работать с префиксом -ms-
@vasil-vasil
@vasil-vasil 4 года назад
8:25 перелистнул страницу
@AndAlexei
@AndAlexei 6 лет назад
"двухмерное измерение" касается и flex, если че
@boch112
@boch112 7 лет назад
как оно на mobile?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Будет отлично!
@user-ik7rp8qz5g
@user-ik7rp8qz5g 7 лет назад
Табличная верстка в новой оболочке. Это разрабатывали депутаты госдумы?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Конечно!
@Temniknn
@Temniknn 5 лет назад
Депутаты не разрабатывают. Они распиливают.
@user-fi6ll1of5h
@user-fi6ll1of5h 5 лет назад
Это же мармок
@MrSirus83
@MrSirus83 7 лет назад
не требуется лепить кучу кода
@SuprunAlexey
@SuprunAlexey 7 лет назад
Именно так)
@digitalturkistan1857
@digitalturkistan1857 7 лет назад
неоченто понял слишком быстро комментируеш
@SuprunAlexey
@SuprunAlexey 7 лет назад
Стараюсь что бы не было нудных пауз)
@peterbahrynovskyi1691
@peterbahrynovskyi1691 4 года назад
обяснение не очень(....
@chiefsmedia
@chiefsmedia 4 года назад
лучше не снимал бы чем опубликовал ускоренное видео
@RudiLo
@RudiLo 4 года назад
сука реклама каждые 30 сек
@moto_venom
@moto_venom 4 года назад
Да ну в п**у одна реклама.. диз за это
@dimanazdratenko
@dimanazdratenko 7 лет назад
дохрена рекламных вставок для 11 минут, тебе так не кажется?
@SuprunAlexey
@SuprunAlexey 7 лет назад
Вы бесплатно смотрите урок, верно?
@dimanazdratenko
@dimanazdratenko 7 лет назад
тут такое не прокатывает))) это ютуб детка, если вставил больше одной рекламы лови хейт. С аудиторией в 10к себе позволять это зашквар))
@SuprunAlexey
@SuprunAlexey 7 лет назад
Я собираю адекватную и думающую аудиторию, показываю очень подробно нужный для работы материал и все это бесплатно, взамен я лишь прошу смотреть рекламные вставки, которые показываются ну уж точно не каждый раз. Будьте лояльнее либо купите подписку ютуб ред. Ну либо идите на курсы в вашем городе и платите за курсы преподавателю, в данном же случае вам нужно просто закрыть рекламную вставку через 5 секунд. И да, это образовательный контент, так что даже такие слова как "зашквар" тут неуместны.
@user-mz2rt1vo3k
@user-mz2rt1vo3k 6 лет назад
Интересно, а мне вообще без рекламных вставок ролик показало. Только я сама паузу часто нажимала и писала себе код и сразу в браузере проверяла)) Так что время урока для меня растянулось за счет практики.
@user-bf8sh3nn5y
@user-bf8sh3nn5y 8 месяцев назад
Ужасное объяснение
Далее
New Gadgets! Bycycle 4.0 🚲 #shorts
00:14
Просмотров 9 млн
skibidi toilet 74
07:02
Просмотров 19 млн
Sprinting with More and More Money
00:29
Просмотров 60 млн
New Gadgets! Bycycle 4.0 🚲 #shorts
00:14
Просмотров 9 млн