MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS Grid Layout

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

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

Like tables, grid layout enables an author to align elements into columns and rows. However, unlike tables, grid layout doesn't have content structure, therefore enabling a wide variety of layouts not possible in tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

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

The below example shows a three column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.

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

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 функции

Глоссарий

Руководства

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

Specifications

Specification Status Comment
CSS Grid Layout Кандидат в рекомендации Initial definition.

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

 Внесли вклад в эту страницу: SHOOROOP
 Обновлялась последний раз: SHOOROOP,