CSS Grid: Короткий, Но МОЩНЫЙ Гайд!

  Переглядів 48,681

Анна Блок

Анна Блок

День тому

⚡️ Обновленная версия видео - • 🔥 CSS Grid - самый ПОН...
🔥 Марафон Grid CSS - frontendblok.com/marathons/gr...
11-дневный марафон с практическими заданиями для скорейшего закрепления темы, которую активно используют при верстке сайтов.
Материалы из видео:
1) Can I use - caniuse.com/#feat=css-grid
2) W3 - www.w3.org/TR/css-grid-1/
3) Grid Garden - cssgridgarden.com/#ru
4) Шпаргалка Grid - tpverstak.ru/grid/
5) Книга "CSS для профи"
Таймкоды:
00:00 Вступление
00:16 Определение Grid
00:56 Создание стилей Grid на примере
01:41 Стили для родительского блока
02:33 Стили для дочерних элементов
03:20 Стоит ли использовать Grid CSS в 2020 году
03:43 Обучение верстке сайтов
04:06 Источники для изучение Grid
05:54 Итоги
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/

КОМЕНТАРІ: 99
@annblok_webdev
@annblok_webdev 3 роки тому
Таймкоды: 00:00 Вступление 00:16 Определение Grid 00:56 Создание стилей Grid на примере 01:41 Стили для родительского блока 02:33 Стили для дочерних элементов 03:20 Стоит ли использовать Grid CSS в 2020 году 03:43 Обучение верстке сайтов 04:06 Источники для изучение Grid 05:54 Итоги
@andrejs0tube
@andrejs0tube 3 роки тому
багодаря вашим урокам начал использовать гриды более года назад, для формирования отчетов. Спасибо за инфу!
@Rasmik13
@Rasmik13 3 роки тому
Большое спасибо за Grid Garden. Очень помогло!
@progerlife6690
@progerlife6690 3 роки тому
Спасибо, годная инфа)
@85nik85
@85nik85 3 роки тому
Блок, ты офигенная! Ты... Ты... Ты даже не блок! Ты целый КУБ!!!
@nas19tom51
@nas19tom51 3 роки тому
Подробно и полезно спасибо
@user-gv2dt2dx9f
@user-gv2dt2dx9f 3 роки тому
Круто! Дякую за корисну інфу)
@annblok_webdev
@annblok_webdev 3 роки тому
Спасибо :)
@frozeninside5004
@frozeninside5004 3 роки тому
Вот это прям кабзда как подробно ) прям для меня 😂👍
@Snegurjan
@Snegurjan 3 роки тому
Самураям привет))
@frozeninside5004
@frozeninside5004 3 роки тому
@@Snegurjan Привет )
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 роки тому
Сел кушаю и смотрю =))) интересно очень было слушать и вдруг видос закончился о_О!!!На столь интересно было,что не заметил как пролетели эти почти семь минут
@annblok_webdev
@annblok_webdev 3 роки тому
🤩 Я рада, что видео понравилось, будут новые видео и с большим таймингом
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 роки тому
@@annblok_webdev Привет!Тайминг нормален =)))!Я сам просто не понял как быстро пролетело время...А ты когда нибудь сайт про хостинг делала?
@hexruin4569
@hexruin4569 3 роки тому
Левая часть сайта Правая часть сайта
@hexruin4569
@hexruin4569 3 роки тому
Грид нулевых годов
@annblok_webdev
@annblok_webdev 3 роки тому
Да
@sergiogiuno8859
@sergiogiuno8859 3 роки тому
Спасибо за видео. Скажите пожалуйста что чаще используется в работе верстальщика bootstrap или grid.
@annblok_webdev
@annblok_webdev 3 роки тому
Зависит от проекта и от целей проекта. И то и то может использоваться часто.
@shaxzod1138
@shaxzod1138 Рік тому
Спасибо вам большое!!!
@user-ti9ev4nw2k
@user-ti9ev4nw2k 3 роки тому
Годнота!
@user-cb5xj1lg1l
@user-cb5xj1lg1l 3 роки тому
Какой интересный гайд! Я в шоке! Прекрасный новый фон
@evgeniyshapovalov2867
@evgeniyshapovalov2867 2 роки тому
Красавка, спасибо:)
@shertskoff6852
@shertskoff6852 3 роки тому
Подскажи на Bootstrap классы row и col- , которые делают разметку это то же самое css grid?
@annblok_webdev
@annblok_webdev 3 роки тому
Нет, потому что Bootstrap 4 работает на Flexbox. Принцип построения отличается.
@azatmiqaelyan6652
@azatmiqaelyan6652 3 роки тому
3 дня назад закончил книгу > и все было интересно 👍
@annblok_webdev
@annblok_webdev 3 роки тому
Поздравляю! 🥳
@niftyfifty1337
@niftyfifty1337 3 роки тому
как успехи сейчас?
@azatmiqaelyan6652
@azatmiqaelyan6652 3 роки тому
@@niftyfifty1337 хорошие успехи. Спасибо!
@silenciomar7325
@silenciomar7325 Рік тому
@@azatmiqaelyan6652 а как успехи сейчас?))
@yuripalienko6259
@yuripalienko6259 3 роки тому
Лично мне гриды нужны были только если есть список и нужно его адаптивно показывать в несколько колонок, все остальное проще флексами, тут в примере то же самое, список из 6 элементов, получатся гриды это классный способ отображать списки.
@annblok_webdev
@annblok_webdev 3 роки тому
Всё так 👍
@catsapp
@catsapp Рік тому
А на флексах легально верстать макет?
@pavelb5410
@pavelb5410 Рік тому
Спасибо за подсказку с линиями, и номерами. А то я не понимал как это работает 1/3, или 2/3. Теперь имею хоть представление, 💡 и смогу на практике думаю сообразить что к чему. Удачи вам в процветании вашего канала, подписался.
@annblok_webdev
@annblok_webdev Рік тому
🥰
@goncharovpro
@goncharovpro 3 роки тому
Короткий и очень слабый урок - правильное название ролика. Половина воды (что можно найти в поисковике доп.информацию) + реклама своего марафона. Дизлайк однозначно
@khabarho9146
@khabarho9146 3 роки тому
Делайте пожалуйста видео про адаптивная верстка
@getinspired_live
@getinspired_live 2 роки тому
спасибо)
@igorkl5167
@igorkl5167 3 роки тому
Красивый background!
@user-uo2qw1cm1v
@user-uo2qw1cm1v 3 роки тому
Спасибо
@VRazvedkaSPN
@VRazvedkaSPN 3 роки тому
Не совсем понял. grid-template-columns указали 4 колонки, а позиционирование в grid-column пять колонок...? 3/5, 4/5?
@annblok_webdev
@annblok_webdev 3 роки тому
В видео же объяснила почему так)) отсчёт идёт по линиям grid-lines
@alenachuyankova
@alenachuyankova 2 роки тому
Шикарная шпаргалка! Большое спасибо!
@MusicDan4o
@MusicDan4o 2 роки тому
Супер. Помогла окончательно разобраться в сетках. Спасибо большое!
@user-ew4dl5ek2i
@user-ew4dl5ek2i 2 роки тому
спасибо
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 роки тому
особена когда используешь grid-area
@user-qv5ti2vl4i
@user-qv5ti2vl4i 3 роки тому
2:52 не пойму, почему блок "ОБО МНЕ" grid-column: 1/3 а не 1/2
@annblok_webdev
@annblok_webdev 3 роки тому
Счёт идёт по разделяющим линиям
@user-qz4pq2gu4w
@user-qz4pq2gu4w 3 роки тому
Такой вопрос. Если выбирать между CSS GRID и BOOTSTRAP GRID, то что проще и практичней? Что лучше учить новичку?
@snippetdev8456
@snippetdev8456 3 роки тому
Ты задаёшь такие глупые вопросы. Ответ - знать нужно всё, а иначе зачем ты такой нужен, знающий 1/100 от всего WEB.
@Beast8833
@Beast8833 3 роки тому
сравнил кислое с красным.... гриды это технология, бс(css) это фреймворк построенный на технологии флексов
@user-qz4pq2gu4w
@user-qz4pq2gu4w 3 роки тому
@@snippetdev8456 Все знать не реально. Сколько ты сайтов видел на grid? я думаю если откроешь рандомно сайты из поисковой выдачи, это будет 1 из 10. Вопрос был что учить новичку в html и css. Умничать не обязательно. Был бы таким умником, сразу бы понял, что новичку выучить сразу "ВСЕ" не получится, нужно учить постепенно.
@user-qz4pq2gu4w
@user-qz4pq2gu4w 3 роки тому
@@Beast8833 Где ты видел сравнение? Вопрос не ясен? Повторю. Что проще выучить, что более востребовано и чаще применяется CSS GRID или BOOTSTRAP ? С чего начать новичку?
@Beast8833
@Beast8833 3 роки тому
@@user-qz4pq2gu4w html css js, это основа сайтостроения, без всяких фреймворком типа бутстрап будет понимание основ, бутстрап учить и не придется, только ознакомиться с классами, которые в нем используются для сетки....так понятнее?
@anthony_sdv
@anthony_sdv 3 роки тому
В данном макете можно обойтись 3 колонками, а контент в первой выравнивать по левому краю 😜
@annblok_webdev
@annblok_webdev 3 роки тому
Как вариант. Такое решение тоже подходит, но там текст везде выравнивается по левому краю.
@thekamol
@thekamol 3 роки тому
хотелось бы бутстрап 5 будет построена на грид
@mikaelgevorgyan4521
@mikaelgevorgyan4521 3 роки тому
Обожаю Grid пишешь на реакте и забываешь,что там уже все на своих позициях давно стоят =)))!
@dmitriystoyanov933
@dmitriystoyanov933 3 роки тому
Я вот только сейчас на грид перехожу. Как же парят эти маргины и паддинги, он реально упрощает жизнь.
@ultraduck100
@ultraduck100 3 роки тому
@@dmitriystoyanov933 а если на сайте надо сверстать блок в котором адаптивные плитки, то без грида это вообще геморройный гемор )
@veshua_j
@veshua_j Рік тому
И вод я здесь )
@flaviooliveira3095
@flaviooliveira3095 3 роки тому
Bootstrap 👨🏽‍💻
@mirandal9987
@mirandal9987 2 роки тому
ну и прописали мы в стилях сетку. что дальше то?
@anton.k.
@anton.k. 3 роки тому
а чем это лучше флексбоксов
@annblok_webdev
@annblok_webdev 3 роки тому
Флексы для линейной расстановки элементов по одной из двух осей, а с гридами элементами можно управлять в двух осях.
@stevepopcorn8670
@stevepopcorn8670 3 роки тому
А есть Анна Строка?
@gaeresnazarenko9059
@gaeresnazarenko9059 3 роки тому
я шестой лайк поставил и первый комент))))
@annblok_webdev
@annblok_webdev 3 роки тому
😅отлично!
@drmackey69
@drmackey69 3 роки тому
Ребят, посоветуйте хороших живых ютуб каналов по типу этого, которые посвещены веб разработке. Был бы признателен...
@annblok_webdev
@annblok_webdev 3 роки тому
Ютуб обычно сам отлично рекомендует, когда вы смотрите видео по конкретной тематике. в данном случае веб.
@Nick-il7it
@Nick-il7it 3 роки тому
От себя могу порекомендовать мой топ каналов: от 0 до 1, Просто: Разработка и Фрилансер по жизни. Если нужно больше JS`a то Владилен Минин, WebDev с нуля: канал Алекса Лущенко и IT-Камасутра
@ASS-hl2on
@ASS-hl2on 3 роки тому
@@Nick-il7it it Kamasutra
@catsapp
@catsapp Рік тому
Народ, IE 6 поддерживаем?
@user-vs4nr6jv6p
@user-vs4nr6jv6p Місяць тому
На когото она так похожа ))))
@egorkomarov4719
@egorkomarov4719 3 роки тому
Хочу больше тик ток видосов =)
@ARTEMFOREVER
@ARTEMFOREVER 3 роки тому
3:32 - вся суть Ани) в этих секундах.
@vitalikgorohkov1896
@vitalikgorohkov1896 3 роки тому
А что не так?
@azatmiqaelyan6652
@azatmiqaelyan6652 3 роки тому
Мне сейчас 15 лет
@slime155
@slime155 3 роки тому
всем плевать братан
@azatmiqaelyan6652
@azatmiqaelyan6652 3 роки тому
@@slime155 И мне плевать на тебя , если я в свои 15 лет добился многого читал эту книгу и много других книг и знаю на много больше тебя, добился большего, и сейчас работаю в этой сфере, то мне плевать на людей каких как ты.
@slime155
@slime155 3 роки тому
@@azatmiqaelyan6652 Ничего себе Больше меня добился. Даже читал эту книгу и много других книг (непонятно какую книгу). Ну это ты конечно даа.. Еще и в 15 лет. Очень интересно!!! На самом деле читаю твой комментарий, и понимаю что ты 15летний дурачок который решил повыёбываться типо: "Ой смотрите, мне только 15 а я уже программирование учу, это значит что я добился большего чем вы".
@azatmiqaelyan6652
@azatmiqaelyan6652 3 роки тому
@@slime155 знаешь что да ити ти.. просто не хочу испортит комментарии этого замечательного видео. Чего ты добился в этой жизни диванний эксперт. Или ты новерно какой себе программист котор пишет говно код. И еще раз говорю мне плевать на тебя что хочешь пиши. И ты не достоин того чтобы я тратил свое драгоценное время чтобы отвечать твои легко мисленные комментарии диванного эксперта. Смотри на себя в зеркало! !!!!
@slime155
@slime155 3 роки тому
@@azatmiqaelyan6652 за тебя стыдно. Какой из тебя программист, если ты даже писать грамотно не можешь. Я да, добился побольше чем ты, это очевидно. И я в свои годы не писал в интернете типо посмотрите мне 15 лет а я уже крутой, учу программирование.
@maksimrugalov3158
@maksimrugalov3158 3 роки тому
Сложно объясняешь, не трате время, вообще ничего не понял
@thegate4407
@thegate4407 3 роки тому
Что. За .....реклама тупо
@user-dd3nm6yz6d
@user-dd3nm6yz6d 3 роки тому
Флекс, Грид, Бутстрап... Ребята вы серьёзно? Да это же плоско-каменный век. Почему не развиваете 3d интернет? Взгляните сюда. @t Интернет должен стать полностью 3-дэшным. Или так и будете лепить этот плоский метро-стиль?
@Beast8833
@Beast8833 3 роки тому
потому что интернет это не только "сделать 3.14здато, не как у всех", но и частично как платформа, где можно продавать, а для продаж нужно, чтобы робот мог индексировать "плоский" сайт, сайт, состоящий только их webGL, он не для этого
@TalkerTube
@TalkerTube 2 роки тому
Не надо так яростно размахивать руками. Очень отвлекает. Вы видимо где-то услышали, что на видео нужно жестикулировать и все такое. Фишка в том что нужно иметь чувство меры во всем. И в этом тоже
@user-gn1jl9sg8h
@user-gn1jl9sg8h Рік тому
весь ролик реклама, дизлайк, куча воды
@annblok_webdev
@annblok_webdev Рік тому
На канале есть новый ролик про грид ukposts.info/have/v-deo/mo-Ul2l5o5urmn0.html&si=EnSIkaIECMiOmarE
@mariialysenko1094
@mariialysenko1094 2 роки тому
Ужасный урок
@user-cv9xy4uu2f
@user-cv9xy4uu2f Рік тому
Ни о чем
@velesdragon6267
@velesdragon6267 3 місяці тому
Фигня полная а не объяснение
😎 Pixel Perfect верстка сайтов на практике
31:26
Анна Блок
Переглядів 27 тис.
skibidi toilet 73 (full episode)
09:41
DaFuq!?Boom!
Переглядів 21 млн
ТРИЗ - инструмент решения задач, которые представляются нерешаемыми.
23:22
Сокращай и упрощай CSS с помощью :is()
8:57
Анна Блок
Переглядів 17 тис.
Адаптивная верстка на CSS Grid для интернет магазина. Использование grid areas
29:07
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Slaying The Dragon
Переглядів 434 тис.
CSS Grid с нуля №1. Разбираем базовые свойства grid-контейнера
16:07
MaxGraph - cайты как страсть
Переглядів 9 тис.
АДАПТИВНАЯ ВЕРСТКА САЙТА С НУЛЯ ОГРОМНОГО МАКЕТА. ПОДРОБНЫЙ ГАЙД #1
1:17:34
ДЕН - подорожую та програмую
Переглядів 23 тис.