12-пролетная сетка

Еще одна классика: 12-пролетная сетка. Вы можете быстро писать сетки в CSS с помощью функции repeat() . Использование: repeat(12, 1fr); для столбцов шаблона сетки дает 12 столбцов каждый из 1fr .

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

Теперь у вас есть сетка дорожек из 12 столбцов, и вы можете размещать в ней дочерние элементы. Один из способов сделать это — разместить их с помощью линий сетки. Например, grid-column: 1 / 13 будет охватывать весь путь от первой строки до последней (13-й) и охватывать 12 столбцов. grid-column: 1 / 5; будет охватывать первые четыре.

Другой способ записать это — использовать ключевое слово span . С помощью span вы устанавливаете начальную строку, а затем количество столбцов, которые будут охватываться от этой начальной точки. В этом случае grid-column: 1 / span 12 будет эквивалентен grid-column: 1 / 13 , а grid-column: 2 / span 6 будет эквивалентен grid-column: 2 / 8 .

.child-span-12 {
  grid-column: 1 / span 12;
}

HTML

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

CSS

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}