Макет сетки CSS

Макет сетки CSS или Сетка CSS - это метод в каскадных таблицах стилей, который позволяет веб-разработчикам более легко и согласованно создавать сложные адаптивные макеты веб-дизайна в разных браузерах. Существовали и другие методы управления методами макета веб-страницы, такие как таблицы, блочная модель и гибкая коробка CSS. CSS-сетка в настоящее время не является официальным стандартом (это Рекомендация-кандидат W3C ), хотя она принята большинством основных браузеров.

• 1 Мотивация
• 2 Поддержка браузера
• 3 Использование во фреймворках
• 4 Модуль fr
• 5 Примеры
• 6 Ссылки
• 7 Внешние ссылки

Сетка CSS может создавать более асимметричные макеты, чем предыдущие варианты сетки и макета, такие как CSS float. Это также позволяет использовать более стандартизованный код, который работает во всех браузерах. В отличие от этого, полагаться на определенные взломы браузера или сложные обходные пути.

Одна проблема с использованием float в CSS заключается в том, что если контент будет добавлен в одну часть страницы, это может нарушить поток страницы и нарушить макет. Это связано с разной высотой элементов макета. Хотя CSS flex box поддерживает гибкие макеты и обеспечивает гибкость создания сложных макетов, он терпит неудачу, когда возникает необходимость в создании адаптивных макетов в 2-мерном пространстве.

По состоянию на октябрь 2017 года Chrome, Firefox, Safari и Edge поддерживают сетку CSS без префиксов поставщиков. IE 10 и 11 поддерживают сетку CSS, но с устаревшей спецификацией. На мобильных устройствах все современные браузеры поддерживают сетку CSS, за исключением Opera Mini и UC Browser. Веб-разработчики, ориентированные на старые браузеры, могут использовать Modernizr 3.5.0 для обнаружения и корректного изменения веб-страницы по мере необходимости.

В настоящее время нет веб-фреймворков, которые включают сетку CSS, в отличие от гибкого блока CSS, который используется в таких фреймворках, как Bootstrap 4 и Foundation 6.

Блок "fr" часто используется с макетом сетки CSS. Единица "fr", часть спецификации макета сетки CSS, представляет собой часть оставшегося пространства в контейнере сетки.

Вот пример святого Грааля макет :

Верхний колонтитул Нижний колонтитул Левая панель Область основного содержимого Правая панель

Вот пример таблица значений:

Header1
Header2
Header3
value11value12value13value21 value22value23value31value32value33value41value42 значение43 значение51 значение52 значение53 значение61 значение62 значение63 value71 value72 value73

• CSS Grid Layout Module Level 1