Макет сетки CSS
Из Википедии, бесплатной энциклопедии
  (Перенаправлено из CSS Grid Layout )
Перейти к навигации Перейти к поиску
CSS-сетка
Модуль макета сетки CSS, уровень 1
CSS Floated Layout.png
Изображение типичного макета веб-страницы с использованием CSS float .
Родное имя
Модуль макета сетки CSS, уровень 1
Положение делПроект рекомендации кандидата W3C
Впервые опубликовано7 апреля 2007 г. [1] (2007-04-07)
Последняя версияУровень 1
18 декабря 2020 г. [2] (2020-12-18)
Предварительная версияУровень 2
11 марта 2021 г. [3] (2021-03-11)
ОрганизацияW3C
КомитетРабочая группа CSS
Редакторы
  • Таб Аткинс-младший
  • Элика Дж. Этемад
  • Россен Атанасов
  • Ориол Бруфау
  • Алексей Могилевский
  • Фил Капп
  • Маркус Мильке [4] [5]
[3]
Базовые стандартыCSS
ДоменCSS
Сокращенное названиеСетка, макет сетки
Веб-сайтwww .w3 .org / TR / css-grid-1 /
Каскадные таблицы стилей
Концепции
Философии
Инструменты
Сравнения

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

Мотивация

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

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

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

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

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

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

блок fr

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

Примеры

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

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

HTMLВыход
< html > < style > div  {  border :  1 пиксель  сплошной ;  } тело  {  дисплей :  сетка ;  Сетка-шаблон-столбцы :  10 эм  авто  10 эм ;  grid-template-зонах :  "header header header"  "слева в середине справа"  "footer footer footer" ; } </ style > < body >  < div  style = "grid-area: header" >Заголовок </ div >  < div  style = "grid-area: footer" > Нижний колонтитул </ div >  < div  style = "grid-area: left" > Левая панель </ div >  < div  style = "grid- area: middle; height: 200px " > Область основного содержимого </ div >  < div  style = " grid-area: right " > Правая панель </ div > </ body ></ html >

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

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

HTMLВыход
< html > < стиль > . обертка  {  дисплей :  сетка ;  сетка-шаблон-столбцы :  1 фр  1 фр  1 фр ;  Сетка-зазор :  0,5 эм ; } div  {  граница :  сплошная 1 пиксель  ; } </ style > < body > < div class = "wrapper" > < h3 > Header1 </    h3 > < h3 > Header2 </ h3 > < h3 > Header3 </ h3 >  < div > value11 </ div > < div > value12 </ div > < div > value13 </ div >  < div > value21 </ div > < div > значение22 </ div > < div > значение23 </ div > < div> value31 </ div > < div > value32 </ div > < div > value33 </ div >  < div > value41 </ div > < div > value42 </ div > < div > value43 </ div >  < div > value51 </ div > < div > значение52 </ div > < div >значение53 </ div>  < div > value61 </ div > < div > value62 </ div > < div > value63 </ div >  < div > value71 </ div > < div > value72 </ div > < div > value73 </ div >  < / div > </ body > </ html >

использованная литература

  1. ^ «История публикаций уровня 1 модуля макета сетки CSS - W3C» . W3C . nd . Проверено 9 апреля 2021 .
  2. ^ a b c d e Аткинс-младший, Таб; Дж. Этемад, Элика; Атанасов, Россен; Brufau, Oriol; Могилевский, Алексей; Купп, Фил; Мильке, Маркус, ред. (2021-12-18). "CSS Grid Layout Module Level 1" . W3C . Рабочая группа W3C . Проверено 9 апреля 2021 .
  3. ^ a b Аткинс-младший, Табл .; Дж. Этемад, Элика; Атанасов, Россен; Brufau, Oriol; Могилевский, Алексей; Купп, Фил; Мильке, Маркус, ред. (2021-03-11). "CSS Grid Layout Module Level 2" . W3C . Рабочая группа CSS . Проверено 9 апреля 2021 .
  4. ^ Могилевский, Алексей; Купп, Фил; Мильке, Маркус; Глазман, Дэниел, ред. (2011-04-07). «Макет сетки» . W3C . Рабочая группа CSS . Проверено 9 апреля 2021 .
  5. ^ Могилевский, Алексей; Мильке, Маркус, ред. (2007-09-05). "CSS Grid Positioning Module Level 3" . W3C . Рабочая группа CSS . Проверено 9 апреля 2021 .
  6. ^ «CSS Grid - Верстка таблицы. Будьте там и будьте квадратными» . Разработчики Google . Январь 2017 . Проверено 9 апреля 2021 .
  7. ↑ Андерсон, Карим (13 сентября 2017 г.). «Новейший браузер Microsoft получает значительное развитие с EdgeHTML 16» . Проверено 7 октября 2017 года .
  8. ^ Protalinski, Эмиль (9 марта 2017). «Chrome 57 поставляется с улучшениями CSS Grid Layout и API | VentureBeat» . VentureBeat . Проверено 7 октября 2017 года .
  9. ^ "CSS Grid Layout" . Могу я использовать . nd . Проверено 9 апреля 2021 .
  10. ^ Атеш, Фарук (2017-04-13). «Модернизр 3.5.0» . Новости Modernizr . Проверено 9 апреля 2021 .
  11. ^ «Начало / конец столбца сетки - Попутный ветер CSS» . Проверено 13 апреля 2021 .
  12. ^ Goetter, Рафаэль (2017-02-16). «Сетки и фреймворки Flexbox» . GitHub Gist . Архивировано из оригинала на 2017-02-16 . Проверено 9 апреля 2021 .
  13. ^ Alligator.io (2020-09-03). "CSS Grid Layout: The Fr Unit" . DigitalOcean . DigitalOcean . Проверено 9 апреля 2021 .
  14. ^ Маркотт, Итан (2018-07-18). «Дробное. - Итан Маркотт» . Итан Маркотт . Проверено 9 апреля 2021 .
  15. ^ Рендл, Робин (2017-06-12). "Введение в модуль CSS` fr` " . CSS-хитрости . Проверено 9 апреля 2021 .

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

  • Модуль макета сетки CSS, уровень 1
  • CSS Grid против Flexbox
Источник « https://en.wikipedia.org/w/index.php?title=CSS_grid_layout&oldid=1018090911 »
Contribute a better translation