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

1820 ratings | 27952 views


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

Всем привет в этом видео я расскажу вам о CSS Grid layout. Этот урок некое введение в гриды. Я покажу как сделать простую структуру сайта используя первые свойства CSS Grid layout. ======================================================== ПОДПИШИСЬ на канал Web Developer Blog - И не пропускай новые видео!!! ======================================================== ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - Основы JavaScript - Уроки Bootstrap 4 - Уроки Framework для верстки Foundation 6 - Рубрика Основы за 10 минут - Верстка сайта на Foundation 6 - Основы препроцессора SASS - Уроки по Sublime text 3 - Создаем интернет магазин на PrestaShop - Уроки jQuery - ======================================================== ПОДПИШИСЬ на Группу Вконтакте Web Developer Blog - ========================================================

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

Владимир Попов 1 month ago
Здравствуйте,Алексей!Помогите ,изволь ,разобраться:смотрел Ваши видео ,все в точности повторил, однако ни гряды ни flexbox числа на ряды не меняют.Может быть необходимо добавить какие -то плагины либо расширения в SublimeText.При этом обычная верстка веб-сайта(другое видео)все замечательно вышло.Заранее признателен.
Tatyana Molchanova 1 month ago
После того, будто расписываю.container in css верстка разбегается, отражается лишь header and footer. Firefox обновлен. В Гугл Хроме та же история
Артём Пешков 2 months ago
Отлично. А сейчас назовите хотя бы одну причину не использовать заместо этого флекс, таблицы либо очевидные флоаты. Самая основная сущность не раскрыта ни капли - В ЧЕМ ИМЕННО отличие гридов от итого остального? ЗАЧЕМ мне их использовать заместо хоть какой подходящей старенькой технологии? Этого я из видео будто один таки не сообразил, а доки отыскать в сети не неувязка.
panteleyalex 3 months ago
Спасибо ЧЕЛОВЕЧИЩЕ!!!
Влад Ефименко 3 months ago
А я делаю чрез @media)))
Нурсултан Аскарулы 3 months ago
Пожалуйста сделайте видео о том будто сделать розыск по веб-сайту, разные варианты поиска и тщательно. отчего прошу Вас, конечно поэтому что у Вас талант доходчиво разъяснять!! 👍🏽👍🏽👍🏽
Танки Онлайн - Паркур 6 months ago
Emmet код для HTML разметки: _.grid>.grid-item item-$ *9_
Антон Сурыгин 7 months ago
Оч крутой прибор. Спасибо
Web Developer Blog 7 months ago
И вам благодарю!
Игорь Лапицкий 7 months ago
чётко, молодчина
artem Kit 8 months ago
Спасибо!
Дмитрий Владимиров 9 months ago
Шикарное видео, обучи верстать!!!!
Timur Salavatov 9 months ago
Редко оставляю комменты, однако здесь не могу не произнести благодарю. Несмотря на то, что у тебя не самое огромное число подписчиков - формат видео и обучения одно из наилучших. Удачи для тебя и прироста подписоты. Просто благодарю.
DenC Программирование 10 months ago
Почему когда ставишь лишь одинешенек footer в areas он улетает?
Валерий Синцов 11 months ago
говноролик
Алексей Андрюхин 11 months ago
двухмерное измерение касается и flex, если че
Vladisav Vdovin 1 year ago
Огромное благодарю ;)
Space IT 1 year ago
*Это бомба, если не тяжело, этак же в собственный монере ( без воды с монтажем ) сверстай изволь веб-сайт адаптивный, простой однако с меню, которое тоже будет адаптивное, благодарю за ранее!*
Web Developer Blog 1 year ago
Хорошо
Max Maxximus 1 year ago
подскажите изволь что это у вас за программка темная такая где вы код пишите? Хочу приступить учить верстку для себя, а в чем набирать код и вообщем в какой программке это делается не знаю. Можете еще ссылки на уроки для новичков с полного 0 порекомендовать, буду рад)
Max Maxximus 1 year ago
Web Developer Blog благодарю
Web Developer Blog 1 year ago
Sublime text
Marrius 1 year ago
Спасибо за клёвый задание, и полезную инфу!
Александр Шайтар 1 year ago
ура, хоть кто-то правильно разъяснил будто и что работает на схематичном примере :) лайк!
id77777777 1 year ago
чувак, ты реально крут! благодарю для тебя огромное!
Макс Дзюбак 1 year ago
Спасибо за все уроки, фурроров для тебя и естественно продолжения )
Сoffee Code 1 year ago
стащил +
Alan Buday 1 year ago
скажите, а IE это все работает?
Daniil 5 months ago
В IE 10 и IE 11 grid обязан трудиться с префиксом -ms-
Web Developer Blog 1 year ago
совсем дудки( ну-ка и этак то в IE не достаточно что вообщем работает
Victor Kotelevich 1 year ago
Я впечатлен. Вот это конечно! Не задумывался, что вот этак просто и стремительно можно накидать макет веб-сайта. Жаль, что лишь одинешенек видео задание о CSS Grid.
Web Developer Blog 1 year ago
будет еще немало уроков по гридам. Мне необходимо пора что б их составить!
Мария Букалова 1 year ago
Очень здорово. А вы собираетесь еще видео про грид мастерить?
Web Developer Blog 1 year ago
Да видео о гридах еще будет и не одно
Александр Старшинов 1 year ago
А животрепещуще ли на данный момент верстать на гридах?
NightHunter 1 year ago
дудки search=css-gr, чрез 5-6 лет может быть
Web Developer Blog 1 year ago
Слабая помощь покамест что, этак что дудки)
Skip Tyler 1 year ago
Будет продолжение?
Skip Tyler 1 year ago
Будем ожидать)
Web Developer Blog 1 year ago
Да все будет, на данный момент времени дудки(
Вадим Лыпка 1 year ago
Ого, я впечатлен будто ловко и стремительно, а самое главное, что максимально попросту объясняешь, благодарю большущее за проделанную работу.
Web Developer Blog 1 year ago
Спасибо за оборотную связь!
PWNZ-kicrup 1 year ago
это что, типа бутстрап больше не нужен либо будто?? в каких случаях употребляют гриды?
IlyaFrontend 1 year ago
Ни в каких, его помощь весьма слабенькая, однако когда выйдет, это буит массивно
Anthony Ustinoff 1 year ago
Круто, интерсно продолжение, можно и практику.
Web Developer Blog 1 year ago
Да создадим
Martial arts and lulz 1 year ago
Спасибо, всё попросту и понятно! Только у меня в Опере отчего-то не сработал медиа запрос, пришлось гуглить и добавить @media screen and (max-width: 600px), only screen and (max-device-width : 600px).
Евгений Чугаев 1 year ago
Martial arts and lulz благодарю! И в хроме посодействовало.
Zver64 1 year ago
Бро, ты одинешенек из наилучших на ютубе, кто делает подобные видео. Никакой воды, все емко и по сущности. Это твоя фишка - не потеряй ее. Подписка и лайк.
Web Developer Blog 1 year ago
Спасиб огромное. Всегда этак и старался
Arctomachine 1 year ago
Табличная верстка в новейшей оболочке. Это разрабатывали депутаты госдумы?
Web Developer Blog 1 year ago
Конечно!
Владимир Бочкарев 1 year ago
будто оно на mobile?
Web Developer Blog 1 year ago
Будет пять!
Skip Tyler 1 year ago
Продолжай в том же духе! Спасибо за уроки!
Web Developer Blog 1 year ago
Спасибо огромное! Обязательно буду продолжать
Somebody 1 year ago
Спасибо! Отличный задание)
Web Developer Blog 1 year ago
Это весьма и весьма веселит
azizbek pinjebaev 1 year ago
неоченто сообразил очень стремительно комментируеш
Web Developer Blog 1 year ago
Стараюсь что бы не было нудных пауз)
Сергей Неженцев 1 year ago
В Chrome в режиме разработчика блоки не передвигаются при изменении разрешения, в других браузерах все норм (не считая Edge и Explorer естественно же), если кто столкнется с этим, имейте ввиду. P.s. задание хороший!
Олеся Гамолина 8 months ago
Я тоже смотрела. Перемещаются - если попросту порядок разработчика. А если в нем надавить просмотр для мобилок, то отчего-то уже не передвигаются. Для мобилок показан облик с колонками слева-справа. Может попросту, на мобилках браузеры еще не поддерживают гриды? Я еще не в курсе, лишь сейчас основы учить эту тему.
Саня Онишко 10 months ago
Перемещаются, я смотрел.
Web Developer Blog 1 year ago
Спасибо, весьма веселит что понравилось)
Artem Zaremba 1 year ago
Ты красавец)
Web Developer Blog 1 year ago
Спасибо за похвалу!
Neo 1 year ago
булшит
Web Developer Blog 1 year ago
Аргументы?
Дима Наздратенко 1 year ago
дохрена маркетинговых вставок для 11 минут, для тебя этак не будто?
Олеся Гамолина 8 months ago
Интересно, а мне вообщем без маркетинговых вставок ролик показало. Только я сама паузу нередко надавливала и писала для себя код и сходу в браузере инспектировала)) Так что пора урока для меня растянулось за счет практики.
Web Developer Blog 1 year ago
Я собираю адекватную и думающую аудиторию, показываю весьма тщательно подходящий для работы материал и все это безвозмездно, вместо я только прошу глядеть маркетинговые вставки, которые показываются ну-ка уж точно не любой один. Будьте лояльнее или купите подписку ютуб ред. Ну или идите на курсы в вашем городке и платите за курсы педагогу, в данном же случае вам необходимо попросту затворить маркетинговую вставку чрез 5 секунд. И конечно, это образовательный контент, этак что даже такие слова будто зашквар здесь не к месту.
Дима Наздратенко 1 year ago
здесь такое не прокатывает))) это ютуб детка, если воткнул больше одной рекламы лови хейт. С аудиторией в 10к для себя дозволять это зашквар))
Web Developer Blog 1 year ago
Вы безвозмездно смотрите задание, правильно?
Kost Psyvac 1 year ago
Спасибо за ролики! Пожалуй, 1-ый пригодный канал потом ухода Sorax`a
Adam Slavo 10 months ago
Жаль что зоракс ушёл, отменно делал
Web Developer Blog 1 year ago
Спасибо огромное!! Это весьма веселит и мотивирует мастерить еще больше и лучше новые видео!
Слава 1992 Илюшин 1 year ago
ждём новое видео!!!!
Web Developer Blog 1 year ago
Будет!
32sm 1 year ago
из всех кого смотрю, твои уроки заходят лучше всех поддерживаю лойсом!)
Web Developer Blog 1 year ago
Вы даже не представляете какая это мотивация мастерить больше не плохих видео! Спасибо!
uBu 1 year ago
Очень круто запорошить под ваши видео, благодарю) сам этим не занимаюсь попросту любопытно поглядеть
Web Developer Blog 1 year ago
Ну поглядите что то повеселее, влоги других блогеров к примеру. Front end не любой осилит)
Артур Гринберг 1 year ago
У меня не хватает слов сформулировать мою признательность. Я этак издавна ожидал уроки по Grid. Отлично и чётко все растолковал , надеюсь ты снимешь отдельный цикл уроков по нему либо практику будто с flexbox'ом. Спасибо
cool Fusion 11 months ago
1:30 Flexbox тоже позволяет поменять размещение обектов не меняя html.
Eugene Rudoi 1 year ago
желаем
Артур Гринберг 1 year ago
Ждём с нетерпением!
Web Developer Blog 1 year ago
Если желаете непременно сниму!
Igor K 1 year ago
Лайк, однако не поведали какие браузеры поддерживают css гриды
teteteleken 10 months ago
.опера еще с 44 версии гриды пользует нормально.тот веб-сайт для проверки странноватый какой-то,в нем опера вся красноватая отчего-то.однако опера пользует
Сергей Протос 11 months ago
что животрепещущая тема? попросту начал обучать бутстрап4, флексы и вот натолкнулся на гриды. лучше сходу с их приступить?
Line1624 11 months ago
>> все красноватое. про кроссбраузерность можно запамятовать. чрез 5-6 лет может и станет животрепещущим. не любопытно, вообще. Ваш прогноз провалился :)
NightHunter 1 year ago
все красноватое. про кроссбраузерность можно запамятовать. чрез 5-6 лет может и станет животрепещущим. не любопытно, вообще.
Ruslan Miftakhov 1 year ago
На caniuse.com вбей CSS-Grid и все узреешь
Влад Васильев 1 year ago
Пили продолжение! Мы ждём) Урок улёт, лишь разъясняй всё помедленнее :D
Ruslan Vyshnevskiy 1 year ago
не нужно медлительнее! Подача 10/10!
Влад Васильев 1 year ago
я по поводу template не сходу сообразил и ещё, этак, для улучшения: оставляй ссылочку на материал, с подробным описанием параметров применяемых в видео)
Web Developer Blog 1 year ago
Спасиб огромное! Подскажите к примеру какие принципиальные моменты в этом видео я нехорошо растолковал? Просто что б я осознавал. Просто для меня это вообщем тривиальные моменты, которые будто будто разъяснять вообщем не необходимо, а вот новенькому это будто один и не понятно.
Влад Васильев 1 year ago
принципиальные моменты лучше разжёвывать помедленнее, чтоб по 5 один не перематывать) А этак всё пять, вижу, что вырезаешь избыточное, молодчина)
Web Developer Blog 1 year ago
Так я напротив что бы видео было не таким длинноватым, вырезаю ненадобные моменты. Или говорю весьма стремительно?
Vitaliy Sokolov 1 year ago
не требуется лепить кучу кода
Web Developer Blog 1 year ago
Именно этак)
azizbek pinjebaev 1 year ago
продолжайте
Alibek M 1 year ago
Пожалуйста, не спеши при разъяснении. А то вон запамятовал разметку, я то задумывался, в чем подкол. Не спеши, плз. В остальном благодарю, лайк
Web Developer Blog 1 year ago
Спасибо! Да постараюсь, попросту в час ночи видео снимал и будто то конечно, про псевдонимы запамятовал.
Sinakten One 1 year ago
Супер. Жаль, что не все браузеры поддерживают грид
Daniil 5 months ago
И на данный момент животрепещуще, если не критична помощь 9-го IE. Остальные браузеры обновляются автоматом.
NightHunter 1 year ago
скажем больше, ее поддерживают лишь последние версии браузеров. чрез 5-6 лет может станет животрепещущим.
Web Developer Blog 1 year ago
Над этим на данный момент усердно работают!
Yerzhan Beisembayev 1 year ago
Круто!) можно ли скооперировать CSS Grid и Flexbox?
кашалот чпок 1 year ago
Добрый денек,гриды для расстановки блоков ,а флексы для частей снутри блоков
Web Developer Blog 1 year ago
Добрый денек, можно, однако для чего? Лучше что то одно использовать уже
Павел Седой 1 year ago
Супер! Урок весьма приглянулся, желаю продолжение!)
Павел Седой 1 year ago
Лайк поставил сходу) желал выяснить, кушать ли в планах уроки по какому-то из фреймворков, типа Yii2, Laravel.?
Web Developer Blog 1 year ago
Спасибо, ставьте лайк, наберем 100 лайков и будет последующее видео!
Vlad Well 1 year ago
Круто! Спасибо за видос )
Web Developer Blog 1 year ago
Пожалуйста, надоюсь весьма здорово!