CSS
сетка

Вступление

замечания

Основной пример

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 для упорядочения протестировать их.