Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS Grid layout приносит инструмент двумерного макета в Веб, с возможностью размещения элементов в строках и столбцах. CSS сетка может использоваться для достижения многих различных макетов. Он разделяет страницу на крупные регионы, или определяет отношения с точки зрения размера, положения и слоя, между частями элемента управления, построенных из HTML примитивов.

Подобно таблицам (<table>), Grid Layout позволяет  размещать элементы в колонках (columns) и строках (rows). Однако CSS Grid упрощает или делает возможным гораздо больше макетов, чем таблицы. Например, ячейки CSS Grid могут перекрывать друг друга.

Базовый пример

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

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Ссылки

CSS свойства

CSS функции

Глоссарий

Руководства

Внешние ресурсы

Спецификации

Спецификация Статус Комментарий
CSS Grid Layout Кандидат в рекомендации Initial definition.

Метки документа и участники

Внесли вклад в эту страницу: SavkovCG, dblokhin, Renatdk, Fgeniy, igor-klymenok, InkFaust, SHOOROOP
Обновлялась последний раз: SavkovCG,