Поиск…
Вступление
Макет сетки - это новая и мощная система компоновки CSS, которая позволяет легко разделить содержимое веб-страницы на строки и столбцы.
замечания
Модуль модуляции сетки CSS 1-го уровня , по состоянию на 9 сентября 2016 года, Рекомендацию кандидата W3C. Он считается находящимся на стадии тестирования ( https://www.w3.org/Style/CSS/current-work) .
По состоянию на 3 июля 2017 года браузеры Microsoft Internet Explorer 10 и 11 и Edge поддерживают только более старую версию спецификации с использованием префикса поставщика.
Основной пример
| Имущество | Возможные значения |
|---|---|
| дисплей | сетка / встроенная сетка |
CSS Grid определяется как свойство отображения. Он применяется только к родительскому элементу и его непосредственным детям.
Рассмотрим следующую разметку:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
Самый простой способ определить структуру разметки выше как сетку - просто установить ее свойство display в grid :
.container {
display: grid;
}
Однако выполнение этого неизбежно приведет к развалу всех дочерних элементов друг над другом. Это связано с тем, что дети в настоящее время не знают, как позиционировать себя в сетке. Но мы можем прямо сказать им.
Сначала нам нужно сообщить элементу .container сколько строк и столбцов будет составлять его структуру, и мы можем сделать это, используя свойства grid-columns и grid-rows (обратите внимание на плюрализацию):
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
Тем не менее, это все равно не помогает нам, потому что нам нужно дать заказ каждому дочернему элементу. Мы можем сделать это, указав значения grid-row и grid-column которые будут сообщать, где он находится в сетке:
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
Предоставляя каждому элементу значение столбца и строки, он идентифицирует порядок элементов в контейнере.
Просмотрите рабочий пример JSFiddle . Вам нужно будет просмотреть это в IE10, IE11 или Edge, чтобы они работали, поскольку в настоящее время это единственные браузеры, поддерживающие Grid Layout (с префиксом поставщика -ms- ) или включение флага в Chrome, Opera и Firefox в соответствии с caniuse для упорядочения протестировать их.
