[Перевод] Понимание CSS Grid (2 часть): Grid-линии
Перевод Understanding CSS Grid: Grid Lines» Rachel Andrew
В первой статье из серии "Понимание CSS Grid" мы рассмотрели, как создавать родительский grid-контейнер и различные свойства, применяемые к данному элементу. Когда сетка создана, в нашем распоряжении оказывается набор grid-линий. В этой статье вы узнаете, как располагать элементы вдоль данных линий путём добавления свойств к дочерним элементам grid-контейнера.
Мы охватим следующие моменты:
Свойства размещения элементов grid-column-start, grid-column-end, grid-row-start, grid-row-end и их краткие формы записи grid-column and grid-row
Как использовать grid-area для размещения элементов по номерам grid-линий
Как располагать элементы с помощью именованных линий
Отличие в размещении элементов в явной и неявной сетке
Использование ключевого слова span с небольшим бонусом subgrid
Чего следует остерегаться при одновременном использовании ручного и автоматического размещения элементов
Читать дальше →
Источник:
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Перевод] Понимание CSS Grid (3 часть): Grid-области
Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Grid Template Areas» автора Rachel Andrew При использовании CSS Grid, вы можете располагать элементы на сетке,... читать далее
[Перевод] Именование в CSS Grid
Когда вы впервые изучаете, как использовать Grid-разметку, можно начать с размещения элементов на сетке по номерам линий. В этом случае необходимо следить за тем, где на сетке проходят определённые... читать далее
[Перевод] Понимание CSS Grid: Создание Grid-контейнера
Перевод «Understanding CSS Grid: Creating A Grid Container» Рейчел Эндрю Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было... читать далее
[Перевод] CSS Grid — швейцарский армейский нож для макетов сайтов и приложений
В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.... читать далее
[Перевод] Gap — светлое будущее для отступов в Flexbox (как в Grid)
Одна из моих любимых частей спецификации CSS Grid — это grid-gap. Они позволяют легко создавать отступы между элементами внутри сетки. Margins и приёмы, к которым мы прибегаем, чтобы реализовать их в... читать далее
[Перевод] Гибкая разметка без медиа-запросов: функции min(), max(), clamp()
Перевод «Flexible layouts without media queries» Dannie Vinther С момента появления в браузерах в 2017 году, CSS Grid дал веб-дизайнерам и разработчикам новую суперсилу. На данный момент существует... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест интернет-магазин корпоративный сайт модуль мы рекомендуем портфолио разработка ссылки фронтенд
Реклама на сайте