stringtranslate.com

Макет сетки CSS

В каскадных таблицах стилей CSS-сетка или CSS-сетка создает сложные адаптивные сеточные макеты веб-дизайна более легко и согласованно в разных браузерах. [6] Исторически существовали и другие методы управления методами макета веб-страниц, такие как таблицы , плавающие элементы и, совсем недавно, CSS Flexible Box Layout (flexbox). CSS-сетка в настоящее время не является официальным стандартом (это рекомендация W3C Candidate ), хотя она была принята в последних версиях всех основных браузеров. [7]

Мотивация

CSS grid может создавать более надежные и гибкие макеты, чем предыдущие варианты, такие как CSS floats . Он также позволяет использовать более стандартизированный код, работающий во всех браузерах. Это контрастирует с использованием определенных браузерных хаков или сложных обходных путей. [2]

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

История

Первый всеобъемлющий проект макета сетки для CSS был создан Филом Каппом в Microsoft в 2011 году и реализован в Internet Explorer 10 с -ms- вендорным префиксом . Синтаксис был реструктурирован и дополнительно улучшен в ходе нескольких итераций в рабочей группе CSS , возглавляемой в первую очередь Эликой Этемад и Табом Аткинсом-младшим. Функция была широко принята веб-разработчиками после евангелизации, возглавляемой в первую очередь Рэйчел Эндрю и Джен Симмонс . [8]

Поддержка браузера

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

Использование в фреймворках

Tailwind CSS включает CSS-сетку в свои утилиты для управления размером и размещением элементов. [14] Однако многие другие современные веб-фреймворки не включают CSS-сетку, например Bootstrap 4 и Foundation 6. [15]

fr единица

Единица измерения «fr» часто используется в сеточной компоновке CSS. [16] [17] [18] Единица измерения «fr», часть спецификации сеточной компоновки CSS, представляет собой часть оставшегося пространства в контейнере сетки. [2]

Примеры

Макет "Святой Грааль"

Ниже приведен пример макета «Святого Грааля» :

Таблица значений

Ниже приведен пример таблицы значений:

Ссылки

  1. ^ "История публикаций модуля CSS Grid Layout Level 1 - W3C". W3C . nd . Получено 2021-04-09 .
  2. ^ abcd Аткинс-младший, Таб; Дж. Этемад, Элика; Атанасов, Россен; Бруфау, Ориол; Могилевский, Алекс; Капп, Фил; Мильке, Маркус, ред. (18.12.2021). "Модуль компоновки сетки CSS, уровень 1". W3C . Рабочая группа W3C . Получено 09.04.2021 .
  3. ^ ab Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen, ред. (14.03.2023). "CSS Grid Layout Module Level 2". W3C . CSS Working Group . Получено 26.03.2023 .
  4. ^ Могилевский, Алекс; Капп, Фил; Мильке, Маркус; Глазман, Дэниел, ред. (2011-04-07). "Grid Layout". W3C . CSS Working Group . Получено 2021-04-09 .
  5. ^ Могилевский, Алекс; Мильке, Маркус, ред. (2007-09-05). "CSS Grid Positioning Module Level 3". W3C . CSS Working Group . Получено 2021-04-09 .
  6. ^ "CSS Grid – Table layout is back. Be there and be square". Google Developers . Январь 2017. Получено 2021-04-09 .
  7. ^ "CSS Grid Layout (level 1) | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т. д.". caniuse.com . Получено 2022-01-12 .
  8. ^ Густафсон, Аарон (2017-10-19). «История CSS Grid от ее создателей». A List Apart . Получено 2022-01-12 .
  9. ^ Андерсон, Карим (13 сентября 2017 г.). «Новейший браузер Microsoft получает значительный импульс с EdgeHTML 16» . Получено 7 октября 2017 г.
  10. ^ Проталински, Эмиль (9 марта 2017 г.). "Chrome 57 выходит с CSS Grid Layout и улучшениями API | VentureBeat". VentureBeat . Получено 7 октября 2017 г.
  11. ^ "CSS Grid Layout". Могу ли я использовать . nd . Получено 2021-04-09 .
  12. ^ ""grid" | Могу ли я использовать... Поддержку таблиц для HTML5, CSS3 и т. д.".
  13. ^ Атеш, Фарук (13 апреля 2017 г.). «Модернизр 3.5.0». Новости Модернизра . Проверено 9 апреля 2021 г.
  14. ^ "Начало / конец столбца сетки - Tailwind CSS" . Получено 2021-04-13 .
  15. ^ Goetter, Raphael (2017-02-16). "Flexbox сетки и фреймворки". GitHub Gist . Архивировано из оригинала 2017-02-16 . Получено 2021-04-09 .
  16. ^ Alligator.io (2020-09-03). "CSS Grid Layout: The Fr Unit". DigitalOcean . DigitalOcean . Получено 2021-04-09 .
  17. ^ Маркотт, Итан (2018-07-18). "Дробный. — Итан Маркотт". Итан Маркотт . Получено 2021-04-09 .
  18. ^ Рендл, Робин (12.06.2017). «Введение в CSS-единицу „fr“». CSS-Tricks . Получено 09.04.2021 .

Внешние ссылки