Что такое модульные сетки, технологии Grid Layout

Что же такое модульные сетки? Модульные сетки (англ. modular grids) — это система вертикальных и горизонтальных линий, которые используются для выравнивания элементов на веб-странице. Они позволяют разбить страницу на равные части, называемые модулями, что упрощает размещение контента и создание баланса между элементами страницы.

Модульные сетки могут быть реализованы с помощью различных технологий, таких как Flexbox и Grid Layout. Они могут быть адаптивными и реагировать на изменения размера экрана, что позволяет создавать адаптивные дизайны для мобильных и настольных устройств.

Применение модульных сеток помогает создавать эстетически приятные и легко воспринимаемые дизайны, улучшает визуальную иерархию контента и облегчает чтение и восприятие информации на странице.

С помощью технологии Grid Layout можно выстраивать модульные сетки и группировать элементы следующим образом:

Определите контейнер, в котором будет находиться сетка. Для этого используйте свойство display: grid;.
Определите количество строк и столбцов в сетке. Для этого используйте свойства grid-template-rows и grid-template-columns.
Разместите элементы в ячейках сетки. Для этого используйте свойство grid-row и grid-column.
Группируйте элементы в ячейках сетки. Для этого можно использовать свойство grid-area, которое позволяет задавать имена для групп ячеек.

Пример использования технологии Grid Layout:

<div class="container">
  <div class="item-a">Item A</div>
  <div class="item-b">Item B</div>
  <div class="item-c">Item C</div>
  <div class="item-d">Item D</div>
  <div class="item-e">Item E</div>
  <div class="item-f">Item F</div>
  <div class="item-g">Header</div>
  <div class="item-h">Sidebar</div>
  <div class="item-i">Main content</div>
  <div class="item-j">Footer</div>
</div>

<div class="item-g">Header</div>

<div class="item-h">Sidebar</div>

<div class="item-i">Main content</div>

<div class="item-j">Footer</div>

</div>

В данном коде определен контейнер .container, который содержит 10 дочерних элементов с классами .item-a до .item-j. Эти элементы размещены в ячейках сетки с помощью свойств grid-row и grid-column, а также группируются в ячейках сетки с помощью свойства grid-area.

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 1fr 1fr 1fr;
}

.item-a {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item-b {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

.item-c {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.item-d {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.item-e {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
}

.item-f {
  grid-row: 2 / 3;
  grid-column: 4 / 5;
}

.item-g {
  grid-area: header;
}

.item-h {
  grid-area: sidebar;
}

.item-i {
  grid-area: main-content;
}

.item-j {
  grid-area: footer;
}

.container {

display: grid;

grid-template-rows: 100px 100px;

grid-template-columns: 1fr 1fr 1fr;

}

.item-a {

grid-row: 1 / 3;

grid-column: 1 / 2;

}

.item-b {

grid-row: 1 / 2;

grid-column: 2 / 4;

}

.item-c {

grid-row: 2 / 3;

grid-column: 2 / 3;

}

.item-d {

grid-row: 2 / 3;

grid-column: 3 / 4;

}

.item-e {

grid-row: 1 / 2;

grid-column: 4 / 5;

}

.item-f {

grid-row: 2 / 3;

grid-column: 4 / 5;

}

.item-g {

grid-area: header;

}

.item-h {

grid-area: sidebar;

}

.item-i {

grid-area: main-content;

}

.item-j {

grid-area: footer;

}

В данном примере определен контейнер .container, который содержит две строки и три столбца. Элементы .item-a до .item-f размещены в соответствующих ячейках сетки, а элементы .item-g до .item-j объединены в группы ячеек с помощью свойства grid-area.