Тёмный

Уроки Css Grid Layout пример адаптивная верстка сайта 

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

В этом видео мы продолжаем Уроки Css Grid Layout и сегодня я покажу пример адаптивная верстка сайта с применением технологии гридов. В уроке css grid я покажу как сделать простой сайта с удобной картой новостей и верстка сайта карты адаптивно. Css grid это относительно новая технология для верстки сайтов адаптивно которая облегчает жизнь веб разработчика.
========================================================
ПОДПИШИСЬ на канал "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
Видео про заработок на RU-vid - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================

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

 

28 авг 2017

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 77   
@Magic__Man
@Magic__Man 4 года назад
Шикарный урок! Спасибо! Большая видео демонстрация! побольше бы таких уроков с демонстрацией разных примеров
@Dizzzais
@Dizzzais 6 лет назад
I like, that you explaining it so fast. Cпасибо!
@dimanazdratenko
@dimanazdratenko 6 лет назад
огромное спасибо за такой формат в пол экрана с браузером. там смотрится совершенно на новом уровне!!!
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Дима Наздратенко спасибо, такие видео с гридами думаю в таком формате снимать)
@user-yw7wg1mf1k
@user-yw7wg1mf1k 6 лет назад
Всё просто, ясно и понятно !)
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Александр Касаткин старался, спасибо!
@leshakhalin
@leshakhalin 5 лет назад
Лайк. Делаешь все просто мастерски. Некоторые моменты без практики бы сам не додумал
@vitaliitaranik
@vitaliitaranik 6 лет назад
Привет всё очень круто,давай отдельно grid-column,grid-row,
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Виталий Тараник сделаю
@vitaliitaranik
@vitaliitaranik 6 лет назад
Спасибо)
@dr.rastafarai7548
@dr.rastafarai7548 6 лет назад
Давай отдельное видео по свойствам гридов. Будет полезно!
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Skip Tyler будет сделано
@LobanovSpace
@LobanovSpace 5 лет назад
Поддерживаю
@johnconnor9787
@johnconnor9787 6 лет назад
Супер! А можете пожалуйстасделать видос, где будете с нуля с какогоо нибудь PSD макета верстать используя Grid.
@LobanovSpace
@LobanovSpace 5 лет назад
Я бы тоже посмотрел
@user-es5kh7vx7b
@user-es5kh7vx7b 6 лет назад
Неплохо. А будет курс по css grid на примере верстки макета?
@zenfen9442
@zenfen9442 4 года назад
Спасибо за Ваши уроки! Чтобы понимать как работает для каждого элемента, вместо title на каждой картинки лучше указавать название класса элемента. Тогда сразу видно как ведёт себя элемент. А так вспоминать надо где что и картинки одинаковые при этом. Но лучше не картинки разные, а название класса вместо заголовка.
@SuprunAlexey
@SuprunAlexey 4 года назад
окей, спасибо!
@Heretic_Man
@Heretic_Man 6 лет назад
Гриды - "между нами тает сайт"
@user-ob9qo2xh1u
@user-ob9qo2xh1u 6 лет назад
топ)
@user-bt4vc1jq3b
@user-bt4vc1jq3b 6 лет назад
лойс
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Дендрай спасибо!
@user-ht6lx8mn2x
@user-ht6lx8mn2x 6 лет назад
плохая идея была брать одно изображение и одинаковый текст для всех блоков
@LobanovSpace
@LobanovSpace 5 лет назад
Да
@charlesbaudelaire7454
@charlesbaudelaire7454 6 лет назад
А как сверстать с помощью гридов ссылки? Тоже меню например? Сделал ul список, в нем li с ссылками, хочу их передвинуть вправо и при этом поставить их горинтально, без флоатов не умею вообще, подскажите пожалуйста.
@mchl_plstv
@mchl_plstv 6 лет назад
В css в классе wrapper, вместо бекграунда, вы сделали бордер.
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Михаил Пластеев посмотрю, да и ничего не изменишь уже
@user-le7cf1qk8l
@user-le7cf1qk8l 6 лет назад
Может быть это наглость но попрошу сделать урок верстки шаблона сайта по типу evernote. Три колонки. Каждая со скролом. Есть header и footer. Универсальная заготовка для дальнейших модификаций.
@SuprunAlexey
@SuprunAlexey 6 лет назад
Сначала сделаю уроки по свойствам
@virgo6324
@virgo6324 5 лет назад
Я убрал все display: flex; и у меня все работает. Меняю размер экрана и все адаптируется.
@user-so7qk1qw6c
@user-so7qk1qw6c 4 года назад
хотелось бы выучить сss grid
@SuprunAlexey
@SuprunAlexey 4 года назад
думаю это не проблема
@virgo6324
@virgo6324 5 лет назад
Не понял одного: зачем у классов .special .amazing .cta display: flex ? Зачем им флексы?
@megant2466
@megant2466 3 года назад
содержание смещается вниз.
@user-vb2gq9pe1j
@user-vb2gq9pe1j 6 лет назад
почему @media у меня активно только вверху css документа. в низу неактивируется???
@skillet0002
@skillet0002 6 лет назад
Я раньше думал что если ты верстаешь на FLexbox то нельзя использовать другие методы типо Gridов
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Василевс Василевский не просто можно, а и нужно!
@user-rg2ci6wy7y
@user-rg2ci6wy7y 6 лет назад
Даешь еще гридов
@SuprunAlexey
@SuprunAlexey 6 лет назад
Сделаем позже в практике
@erwererwrwr
@erwererwrwr 5 лет назад
ужасный урок. Т.к контент в контейнере идентичен непонятно, что меняется от прописанных свойств конкретно и где. Природа "grid-row: 3/6", например, тоже нераскрыта совсем, как и всё остальное. С таким же успехом можно было ролик этот снять под музыку и без голоса, да с ускорением в 3х. Не в обиду автору, много хорошего контента на канале, но этот урок ужасен.
@LobanovSpace
@LobanovSpace 5 лет назад
Спешит автор
@user-xt2go9ze2q
@user-xt2go9ze2q 5 лет назад
.
@FactorySteel
@FactorySteel 3 года назад
Подскажите как сделать так, чтобы блоки при свёртке экрана сначала переходили на новую строку а потом резинились в минимум? Вот пример на Flex Box codepen.io/Soloviev/pen/PoNxWVg Можно ли так же сделать на гридах без медиазапросов?
@zoojs
@zoojs 6 лет назад
Круто объясняешь (нет)
@LobanovSpace
@LobanovSpace 5 лет назад
Хах
@firebird6034
@firebird6034 6 лет назад
8:18 объясните, почему 1/3, когда у нас только две колонки задано? почему не 1/2?
@basado1183
@basado1183 6 лет назад
При этом создаётся третья строка, ширину которой задаёт свойство grid-auto-row (в видео ему присвоено значение minmax(100px, auto) ), тоже самое свойство можно прописать и для колонок
@metarasta9190
@metarasta9190 6 лет назад
мне одному непонятно расставление колонок и рядов
@den100hero
@den100hero 6 лет назад
очень быстро рассказываешь,постарайся напоминать о функции значения,которое вводишь
@user-so7qk1qw6c
@user-so7qk1qw6c 4 года назад
background-image: url(изображение_viber_2019-07-30_21-49-08.jpg); в самом начале не срабатывает изображение целый день мучаюсь проблема с классом что ли ?
@SuprunAlexey
@SuprunAlexey 4 года назад
переименуйте изображение и попробуйте снова
@wannacrypt8951
@wannacrypt8951 6 лет назад
Скажите новичку что это за программа или это плагин на Notepad++ при котором .%команда% сами прописываются правила
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Ехидный Писос это отдельный редактор кода Sublime text, у меня на канале посмотрите видео по нему
@tacticalbelyash
@tacticalbelyash 6 лет назад
1) Он использует не Notepad++, a Sublime Text 2) Лучше не используй Notepad++ 3) Удачи)
@wannacrypt8951
@wannacrypt8951 6 лет назад
Вячеслав Журавский Моя благодарность
@SuprunAlexey
@SuprunAlexey 6 лет назад
посмотри это видео. Я тут рассказал про редактор кода Sublime text который использую и про все плагины которыми я пользуюсь! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HZ4BUcogWCQ.html
@sashkoification
@sashkoification 6 лет назад
Вместо Title надо было указать классы, а то не понятно где что)
@SuprunAlexey
@SuprunAlexey 6 лет назад
+alex nixon согласен, ну да ладно, как сделано так сделано
@pyatdesyatsedmoy
@pyatdesyatsedmoy 4 года назад
лучше бы взял разные цвета вместо картинок. ладно сам так сделаю, повторяя код
@glebboyarshinov9312
@glebboyarshinov9312 5 лет назад
И чё где видео?
@user-cg7ir8bf9f
@user-cg7ir8bf9f 6 лет назад
Рассказано не о всех возможностях гридов и не понятно, что для чего. Гораздо интересней с grid-template-areas и grid-area. Получается намного проще и нагляднее.Вёрстка гридами станет актуальной когда все браузеры начнут её поддерживать, а пока flex.
@user-cg7ir8bf9f
@user-cg7ir8bf9f 6 лет назад
Лично я о гридах знаю практически всё потому, что изучал их на английском ещё 2016, а вот новичкам надо рассказывать о каждом свойстве отдельно и подробно.
@SuprunAlexey
@SuprunAlexey 6 лет назад
+Юрий Потравка ну так те свойства которые были использованы в этом видео я все объяснил отдельно. Вы видео смотрели? Так же могу сделать отдельные видео по свойствам)
@user-cg7ir8bf9f
@user-cg7ir8bf9f 6 лет назад
В ютубе есть хорошее видио смотри и учись как надо объяснять ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xIjWJW6hGuk.html
@SuprunAlexey
@SuprunAlexey 6 лет назад
Спасибо за совет, конечно до Рэйчел мне еще далеко, но я буду стараться)
@user-cg7ir8bf9f
@user-cg7ir8bf9f 6 лет назад
Старайся и знания тебе в помощь!
@romandolgopolov97
@romandolgopolov97 6 лет назад
Контент хорош, но из-за такого объема рекламы смотреть не могу. Все понимаю, просто довожу до сведения. Посмотрел 4 видео, решил сменить канал.
@omich2007
@omich2007 6 лет назад
AdBlocker расширение для Хрома не пробовал установить??)) У меня на этом видео, вообще ни одной рекламы..))
@Dvoini
@Dvoini 6 лет назад
надо сменить планету раз AdBlock поставить не можешь
@kirking252
@kirking252 6 лет назад
У меня нечего не работает!! Почему? все под копирку сделал? может что в JS? в браузере все выглядит в одну колонку!
@SuprunAlexey
@SuprunAlexey 6 лет назад
Кирилл Корниенков тут js вообще никакого нет. Может стили не подключили, может версия браузера старая, может классы неправильно подписали. Просто поищите где то явно ошибка
@kirking252
@kirking252 6 лет назад
в том то и дело что у меня нет с этим проблем, проблем с подключением стилей и работы браузера. сделал все под копирку. стилизовались блоки в колонку, то есть как на мобильных браузерах. А вот при увеличении окна, увеличении ширины браузера, браузер на весь экран - не меняется ни в две ни в три колонки... проверил на 4х браузерах. Все браузеры последней версии
@kirking252
@kirking252 6 лет назад
Можете скинуть исходник или архив работы, к примеру ссылку в Яндекс диске или Дропбокс, ЧТоб я просто скачал и проверил... может что где-то ошибку сделал и в упор не могу ее разглядеть?!
@kirking252
@kirking252 6 лет назад
буду смотреть пока другие ваши уроки по Grid ++ Спасибо за видео!
@zoojs
@zoojs 6 лет назад
Кирилл Корниенков скинь мне свои исходники, покажу тебе где ошибся
Далее
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Просмотров 469 тыс.