Позиционирование ячеек в CSS Grid
Рет қаралды 3,323
Күн бұрынПоскольку CSS Grid - двумерная сетка, то в ней можно располагать ячейки в 2х мерном пространстве, как по оси X, так и по оси Y. В этом видео я покажу, как можно позиционировать отдельно взятый грид элемент (grid item). Все свойства в этом видео относятся к grid item, а не к контейнеру (grid container).
=======================================
Содержание:
0:00 Введение
0:09 grid-column-start / grid-column-end / grid-row-start / grid-row-end
3:15 grid-column / grid-row
4:05 grid-area
5:00 свойство span
5:36 z-index
6:18 end не обязательно должен быть больше, чем start
@prosto_razrabotka 3 жыл бұрын
Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@user-lc8vs4pb9z 4 жыл бұрын
Хорошая подача, без излишних эмоциональностей) Спасибо
@prosto_razrabotka 4 жыл бұрын
Благодарю
@ilyapiatrouski9100 4 жыл бұрын
Привет, спасибо за видео. Помню как смотрел стрим, где ты по доке разбирался в гридах, рад, что теперь доносишь инфу в массы. Удачи)
@prosto_razrabotka 4 жыл бұрын
Спасибо
@prosto_razrabotka 4 жыл бұрын
0:09 grid-column-start / grid-column-end / grid-row-start / grid-row-end 3:15 grid-column / grid-row 4:05 grid-area 5:00 свойство span 5:36 z-index 6:18 end не обязательно должен быть больше, чем start
@Eduard.Eihenb 4 жыл бұрын
Keep going mate
@prosto_razrabotka 4 жыл бұрын
Thx -)
@adiks09 4 жыл бұрын
Кстати после изучения планируется верстка на гридах?
@prosto_razrabotka 4 жыл бұрын
Может быть, если найду подходящий бесплатный макет -)
@kotlancer 4 жыл бұрын
@@prosto_razrabotka будем надеяться, что представится такая возможность) Пока очень интересно)
@darwindominic3518 4 жыл бұрын
Я попробовал на фон вместо цвета вставить картинку и не получилось...Возможно ли это в подобной сетке ?
@darwindominic3518 4 жыл бұрын
Получилось только через html не совсем аккуратно...
@boldureans 4 жыл бұрын
Иху!
@prosto_razrabotka 4 жыл бұрын
Эхехей -))
@Vladikslavik 4 жыл бұрын
Думаете, что уже пора с флексов переходить на гриды?
@prosto_razrabotka 4 жыл бұрын
В данном случае, я лишь делюсь информацией, а не пропагандирую применение -)
@dogvscatfunny9956 4 ай бұрын
Это если одинакового размера картинки,это не будет работает если картинки разного размера все ломается,а значит как всегда гриды это полная чушь
Просто: разработка
Рет қаралды 31 М.
Просто: разработка
Рет қаралды 12 М.
Фрілансер по життю
Рет қаралды 867 М.