От автора: CSS grid layout — это новая модель макета, оптимизированная для двумерных макетов. Она идеально подходит для веб-сайтов, форм, галерей изображений и всего, что требует точного и гибкого позиционирования.
CSS включает в себя множество свойств, которые могут помочь с макетом сайта. Но до начала 2017 года в CSS не было механизма создания двухмерных макетов веб-сайтов. Но все изменилось с введением CSS Grid.
Модуль CSS Grid Layout был разработан рабочей группой CSS для обеспечения лучшего способа создания макетов веб-сайтов в CSS. Он стал Рекомендацией кандидата в феврале 2017 года, а основные браузеры начали поддерживать Grid в марте 2017 года.
С CSS Grid Layout (или просто «CSS Grid») создание расширенных (и адаптивных) макетов стало очень простым. CSS Grid почти наверняка изменит способ разработки веб-сайтов.
Веб-дизайн перешел от использования для макетов таблиц HTML к плавающим элементам CSS, а теперь, наконец, к CSS Grid
По мере того как Сеть развивалась на протяжении многих лет, создание макетов веб-сайтов становилось все более и более сложной задачей. В первые дни Интернета таблицы HTML часто использовались для многоколоночных макетов, форм и т. д. Но у этого метода были свои проблемы. Это означало, что представление должно было реализоваться на уровне разметки, поэтому не было никакого разделения между представлением и контентом. Таблицы были предназначены для хранения табличных данных, а не для создания макетов. И кроме того, что это вызывает семантические проблемы, макеты таблиц не подходят для адаптивного дизайна.
Плавающие элементы в конечном итоге заменили макеты таблиц как общепринятый и рекомендуемый метод компоновки, поскольку он позволяет нам размещать элементы независимо от разметки. Однако, хотя этот метод значительно улучшил макеты на основе таблиц, он также имел свои ограничения. Плавающие элементы были в основном предназначены для макета документа, и они не всегда идеально подходили для более сложного макета приложения, столь распространенного в Интернете сегодня. Управлять плавающими элементами может быть сложно, особенно если учитывать устройства разных размеров и в области просмотра. Это привело к тому, что стали нормой различные «хаки», подобные сетке, большинство из них требовало дополнительной разметки, что умаляло всю концепцию разделения контента. И поэтому рабочая группа CSS искала лучшее решение.
Модель CSS Grid решает эти и многие другие вопросы. Это позволяет вам создавать расширенные макеты за меньшее время, чем потребовалось бы для работы с плавающими элементами, и с помощью меньшего количества кода.
Хотя это правда, что введение flexbox позволило разработчикам отойти от плавающих элементов, flexbox работает только в одном измерении. Grid работает в двух измерениях, поэтому гораздо лучше подходит для создания сложных макетов.
Как работает Grid
Схема Grid работает через сетку. Сетка представляет собой набор пересекающихся горизонтальных и вертикальных линий, которые создают системы координат для определения размеров и позиционирования содержимого контейнера сетки.
Чтобы создать сетку, вы просто устанавливаете для элемента display: grid. Это автоматически делает все элементы сетки прямыми потомками этого элемента. Теперь вы можете использовать различные свойства Grid, чтобы настроить их размер и расположение по необходимости. Обычно первым шагом является определение количества строк и столбцов в сетке (но даже это необязательно — как вы увидите позже).
Сетка с 4 рядами и 3 столбцами
Это пример сетки с четырьмя рядами и тремя столбцами. Она содержит 12 элементов сетки. Каждый элемент сетки имеет зеленый цвет, и между ними есть зазор (зазор определяет пространство между каждым элементом сетки).
Все эти элементы сетки имеют размер одной ячейки, но они могут быть любого размера, который нам нужен. Мы могли бы сделать их разных размеров, если бы захотели. Некоторые могут занимать несколько колонок или рядов, другие могут оставаться размером с одну ячейку. В остальных частях этого руководства мы рассмотрим эти и другие особенности Grid.
Источник: https://www.quackit.com/
Редакция: Команда webformyself.