CSS Grid Layout с максимальной шириной, центрированное содержимое

У вас может быть сетка с двумя столбцами с grid-template-columns: auto 1fr, чтобы первый столбец занимал ширину своего содержимого (такой же ширины, как ширина между логотипом и боковой панелью), а второй столбец занимал оставшееся пространство (обратите внимание, что я установил max-width: 600px на сетка-контейнер).

I also have a requirement of having a solid fill background covering the full-width of the viewport (matching the height of the variable height logo/nav row)

Для этого вы можете сделать следующее:

1. Сначала исправитьlogo и nav в первой строке, установив свойства grid-row и grid-column

2. Теперь используйте псевдоэлемент для wrapper, перекрывающего первую строку (но сложенный ниже, используя свойство z-index).

3. Установите свойство margin-left как calc(-50vw + 50%) и width как 100vw, чтобы растянуть сплошная заливка фона по области просмотра.

См. демо ниже:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto 1fr; /* 2-column grid */
  /* background-color: #fff;*/
  color: #444;
  max-width: 600px; /* max-width of the layout */
  margin: 0 auto; /* center in the viewport */
}
.logo {
  font-size: calc(1rem + 4vw);
  grid-row: 1; /* fix the logo in the first row */
  grid-column: 1; /* fix the logo in the first column */
}
.nav {
  text-align: right;
  grid-row: 1;  /* fix the nav in the first row */
  grid-column: 2;  /* fix the nav in the second column */
}

.footer {
  grid-column: span 2; /* footer spans the two columns */
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.header,
.footer {
  background-color: #999;
}

.wrapper:after { /* position this in the first row */
  content: '';
  display: block;
  grid-row: 1;
  grid-column: 1/ 3;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: gray;
  z-index: -1; /* push it behind the first row */
}

<div class = "wrapper">
  <div class = "box logo">Logo</div>
  <div class = "box nav">Nav</div>
  <div class = "box sidebar">Sidebar</div>
  <div class = "box content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class = "box footer">Footer</div>
</div>

Центрирование

Горизонтальное центрирование контейнера сетки относительно просто. Используйте свойства гибкого выравнивания для родителя:

body {
  display: flex;
  justify-content: center;
}

Максимальная ширина

Вы можете создать максимальную ширину контейнера сетки с помощью свойства max-width или flex.

.wrapper {
  flex: 600px 0 1;
}

Это правило гласит:

• flex-basis: 600px (начальная ширина)
• flex-grow: 0 (элемент не может расширяться за пределы 600 пикселей)
• flex-shrink: 1 (предмет может уменьшаться)

Эта команда по существу эквивалентна max-width: 600px.

2-колоночный макет

Вы написали:

The first column (logo and sidebar) should shrink to fit their content - so the first column is only as wide as the wider between logo/sidebar. The nav/content should then fill the remaining space allowed by the max-width.

Попробуй это:

.wrapper {
  flex: 600px 0 1;
  display: grid;
  grid-template-columns: min-content 1fr;
}

body {
  margin: 40px;
  display: flex;
  justify-content: center;
}

.wrapper {
  flex: 600px 0 1;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "logo  nav" 
                       "sidebar content" 
                       "footer footer";
  background-color: #fff;
  color: #444;
}

.logo {
  grid-area: logo;
  font-size: calc(1rem + 4vw);
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.nav {
  grid-area: nav;
  text-align: right;
}

.footer {
  grid-area: footer;
}

.fill {
  background-color: gray;
}


.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.header,
.footer {
  background-color: #999;
}

<div class = "wrapper">
  <div class = "box logo">Logo</div>
  <div class = "box nav">Nav</div>
  <div class = "box sidebar">Sidebar</div>
  <div class = "box content">Content
  <br /> These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width.</div>
  <div class = "box footer">Footer</div>
</div>