CSS-сетка
 | Эта статья может быть написана в стиле, который слишком абстрактен, чтобы быть понятным широкой аудитории . ( октябрь 2017 г. ) |
| Модуль CSS Grid Layout, уровень 1 | |
 Изображение типичного макета веб-страницы с использованием плавающих элементов CSS . | |
| Аббревиатура | Сетка, макет сетки |
|---|---|
| Родное имя | Модуль CSS Grid Layout, уровень 1 |
| Статус | Проект рекомендации кандидата W3C |
| Впервые опубликовано | 7 апреля 2007 г. [1] |
| Последняя версия | Уровень 1 18 декабря 2020 г. [2] |
| Предварительная версия | Уровень 2 14 марта 2023 г. [3] |
| Организация | W3C |
| комитет | Рабочая группа CSS |
| Редакторы | |
| Базовые стандарты | CSS |
| Домен | CSS |
| Веб-сайт | www |
| Каскадные таблицы стилей |
|---|
| Концепции |
| Философия |
| Инструменты |
| Сравнения |
В таблицах стилей каскадных макет сетки CSS или сетка CSS создавать сложные адаптивные макеты сетки веб-дизайна в разных браузерах. позволяют более легко и единообразно [6] Исторически существовали и другие методы управления макетами веб-страниц, такие как таблицы , плавающие элементы и, с недавних пор, CSS Flexible Box Layout (flexbox). CSS-сетка в настоящее время не является официальным стандартом (это кандидатская рекомендация W3C ), хотя она была принята в последних версиях всех современных основных браузеров. [7]
Мотивация
[ редактировать ]Сетка CSS позволяет создавать более надежные и гибкие макеты, чем предыдущие варианты, такие как плавающие элементы CSS . Это также позволяет использовать более стандартизированный код, который работает во всех браузерах. Это контрастирует с использованием конкретных хаков браузера или сложных обходных путей. [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» часто используется с сеткой CSS. [16] [17] [18] Единица fr, являющаяся частью спецификации макета сетки CSS, представляет собой часть оставшегося пространства в контейнере сетки. [2]
Примеры
[ редактировать ]Планировка «Святой Грааль»
[ редактировать ]Ниже приведен пример макета «Святого Грааля» :
| HTML | Выход |
|---|---|
<html>
<style>
div { border: 1px solid; }
body {
display: grid;
grid-template-columns: 10em auto 10em;
grid-template-areas:
"header header header"
"left middle right"
"footer footer footer";
}
</style>
<body>
<div style="grid-area: header">The header</div>
<div style="grid-area: footer">The footer</div>
<div style="grid-area: left">The left panel</div>
<div style="grid-area: middle; height: 200px">The main content area</div>
<div style="grid-area: right">The right panel</div>
</body>
</html>
|
|
Таблица значений
[ редактировать ]Ниже приведен пример таблицы значений:
| HTML | Выход |
|---|---|
<html>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
div {
border: 1px solid;
}
</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>value22</div><div>value23</div>
<div>value31</div><div>value32</div><div>value33</div>
<div>value41</div><div>value42</div><div>value43</div>
<div>value51</div><div>value52</div><div>value53</div>
<div>value61</div><div>value62</div><div>value63</div>
<div>value71</div><div>value72</div><div>value73</div>
</div>
</body>
</html>
|
|
Ссылки
[ редактировать ]- ^ «История публикаций модуля CSS Grid Layout уровня 1 — W3C» . W3C . нд . Проверено 9 апреля 2021 г.
- ^ Перейти обратно: а б с д Аткинс-младший, Таб; Дж. Этемад, Элика; Атанасов, Россен; Бруфау, Ориол; Могилевский, Алекс; Капп, Фил; Мильке, Маркус, ред. (18 декабря 2021 г.). «Модуль макета сетки CSS, уровень 1» . W3C . Рабочая группа W3C . Проверено 9 апреля 2021 г.
- ^ Перейти обратно: а б Аткинс-младший, Таб; Дж. Этемад, Элика; Атанасов, Россен, ред. (14 марта 2023 г.). «Модуль макета сетки CSS, уровень 2» . W3C . Рабочая группа CSS . Проверено 26 марта 2023 г.
- ^ Могилевский, Алекс; Капп, Фил; Мильке, Маркус; Глазман, Дэниел, ред. (07 апреля 2011 г.). «Раскладка сетки» . W3C . Рабочая группа CSS . Проверено 9 апреля 2021 г.
- ^ Могилевский, Алекс; Мильке, Маркус, ред. (5 сентября 2007 г.). «Модуль позиционирования CSS Grid, уровень 3» . W3C . Рабочая группа CSS . Проверено 9 апреля 2021 г.
- ^ «CSS Grid — макет таблицы вернулся. Будьте там и будьте квадратными» . Разработчики Google . Январь 2017 года . Проверено 9 апреля 2021 г.
- ^ «Макет CSS Grid (уровень 1) | Могу ли я использовать... Таблицы поддержки HTML5, CSS3 и т. д.» . caniuse.com . Проверено 12 января 2022 г.
- ^ Густафсон, Аарон (19 октября 2017 г.). «История CSS Grid от его создателей» . Список врозь . Проверено 12 января 2022 г.
- ^ Андерсон, Карим (13 сентября 2017 г.). «Новейший браузер Microsoft значительно усовершенствован благодаря EdgeHTML 16» . Проверено 7 октября 2017 г.
- ^ Проталинский, Эмиль (9 марта 2017 г.). «Chrome 57 выходит с улучшениями CSS Grid Layout и API | VentureBeat» . ВенчурБит . Проверено 7 октября 2017 г.
- ^ «Разметка сетки CSS» . Могу ли я использовать . нд . Проверено 9 апреля 2021 г.
- ^ " "grid" | Могу ли я использовать... Таблицы поддержки HTML5, CSS3 и т. д." .
- ^ Атеш, Фарук (13 апреля 2017 г.). «Модернизр 3.5.0» . Новости Модернизра . Проверено 9 апреля 2021 г.
- ^ «Начало/конец столбца сетки — CSS попутного ветра» . Проверено 13 апреля 2021 г.
- ^ Геттер, Рафаэль (16 февраля 2017 г.). «Сетки и фреймворки Flexbox» . GitHub суть . Архивировано из оригинала 16 февраля 2017 г. Проверено 9 апреля 2021 г.
- ^ Аллигатор.io (03.09.2020). «Разметка сетки CSS: блок Fr» . Цифровой Океан . Цифровой Океан . Проверено 9 апреля 2021 г.
- ^ Маркотт, Итан (18 июля 2018 г.). «Дробный. — Итан Маркотт» . Итан Маркотт . Проверено 9 апреля 2021 г.
- ^ Рендл, Робин (12 июня 2017 г.). «Введение в модуль CSS 'fr'» . CSS-трюки . Проверено 9 апреля 2021 г.