Из Википедии, свободной энциклопедии
Перейти к навигации Перейти к поиску
Каскадные таблицы стилей
Концепции
Философии
Инструменты
Сравнения


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

Мотивация [ править ]

Изображение типичного макета веб-страницы с использованием CSS float .

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

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

Поддержка браузера [ править ]

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

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

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

единица fr [ править ]

Единица "fr" часто используется в макете сетки CSS. [8] [9] [10] Единица «fr», часть спецификации макета сетки CSS, представляет собой часть оставшегося пространства в контейнере сетки. [11]

Примеры [ править ]

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

< 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 > < стиль > . обертка  {  дисплей :  сетка ;  сетка-шаблон-столбики :  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. ^ «CSS Grid - Верстка таблицы. Будьте там и будьте квадратными» . Google . Проверено 6 октября 2017 года .
  2. ^ a b c «Уровень 1 модуля макета сетки CSS» . W3C . 9 мая 2017 . Проверено 7 октября 2017 года .
  3. ↑ Андерсон, Карим (13 сентября 2017 г.). «Новейший браузер Microsoft получает значительное развитие с EdgeHTML 16» . Проверено 7 октября 2017 года .
  4. ^ Protalinski, Эмиль (9 марта 2017). «Chrome 57 поставляется с улучшениями CSS Grid Layout и API | VentureBeat» . VentureBeat . Проверено 7 октября 2017 года .
  5. ^ "CSS Grid Layout" . Могу я использовать . Проверено 7 октября 2017 года .
  6. ^ Атес, Фарук. «Модернизр 3.5.0» .
  7. ^ "Сетки и фреймворки Flexbox" .
  8. ^ "CSS Grid Layout: The Fr Unit" .
  9. ^ "Дробное". .
  10. ^ "Введение в модуль CSS` fr` "
  11. ^ "Гибкая длина: единица 'fr'"

Внешние ссылки [ править ]

  • Модуль макета сетки CSS, уровень 1
  • CSS Grid против Flexbox