[Перевод] Понимание CSS Grid: Создание Grid-контейнера
Перевод «Understanding CSS Grid: Creating A Grid Container» Рейчел Эндрю
Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.
В данной начальной статье будет рассказано о том, что происходит, когда вы создаёте grid-контейнер и о различных свойствах, которые можно применять к родительскому элементу для управления сеткой. Вы узнаете, что в некоторых ситуациях достаточно только свойств, применяемых к grid-контейнеру.
В этой статье мы рассмотрим:
Создание grid-контейнера с помощью display: grid или display: inline-grid
Создание колонок и строк с помощью grid-template-columns и grid-template-rows
Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows
Читать дальше →
Источник:
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Перевод] CSS Grid — швейцарский армейский нож для макетов сайтов и приложений
В течение последних двух месяцев я углубился в изучение CSS Grid. В этой заметке я хочу поделиться своими основными соображениями. Чтобы было более понятно, я объясню все с помощью диаграмм.... читать далее
Grid Layout как основа современной раскладки
В темные века верстальщики строили сайты на таблицах. Потом они освоили float и flexbox, и тьма отступила. В 2017-м наступила эпоха Просвещения с приходом CSS Grid Layout. Grid учитывает... читать далее
[Перевод] Учим CSS Grid за 5 минут
Быстро познакомимся с будущим макетов веб-сайтов. Grid макеты имеют основополагающее значение для дизайна веб-сайтов, а модуль CSS Grid — это самый мощный и простой инструмент для его создания. В... читать далее
[Перевод] Что происходит при создании контейнера Flexbox?
Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS. В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как... читать далее
[Перевод] Именование в CSS Grid
Когда вы впервые изучаете, как использовать Grid-разметку, можно начать с размещения элементов на сетке по номерам линий. В этом случае необходимо следить за тем, где на сетке проходят определённые... читать далее
CSS Grid Layout. Быстрый старт
Вступление Всем привет. Февраль-Март 2017 года запомнились для многих, кто работает с HTML и CSS тем, что большинство браузеров выпустили обновления, среди которых были и обновления для CSS. Теперь... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru HTML html html5 javascript JavaScript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте