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