Простая работа с full-width элементами | Создание сайтов в Ростове-на-Дону, от одностраничного до корпоративного сайта.

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

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Пример: http://jsfiddle.net/m1L6pfwm/2/ .

Но теперь есть способ семантичнее и элегантнее :)

.Prose {
  display: grid;
  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end];
}

.Prose > * {
  grid-column: main;
}

.Prose-splash {
  grid-column: full;
}

Результат: https://codepen.io/tylersticka/pen/bWvaxP?editors=1100