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

Question

Я нахожусь в процессе изучения CSS Grid (я давно знаю).Я поставил перед собой задачу преобразовать относительно стандартный макет с плавающей точкой в ​​сетку, но не могу понять эту последнюю часть.

Моя цель - создать макет, в котором контент (логотип + навигация и боковая панель + контент) центрирован, с max-width.Например, логотип + навигация должны иметь max-width 600 пикселей.У меня также есть требование иметь сплошной фон заливки, покрывающий всю ширину области просмотра (соответствующий высоте переменной высоты логотипа / строки навигации).

Первый столбец (логотип и боковая панель) должен сжиматься, чтобы соответствовать их содержимому, поэтому первый столбец должен иметь ширину, равную ширине между логотипом и боковой панелью.Навигация / содержимое должно затем заполнить оставшееся пространство, разрешенное max-width.

. Следующее - моя лучшая попытка.Ширина основного контента не заполняет max-width.Вместо этого ширина основного содержимого равна ширине логотипа + 250 пикселей (ширина, определяемая столбцами сетки).

То, чего я надеюсь добиться, - это определить max-width для Logo + Nav для определенной ширины (скажем, 600 пикселей) и уменьшить столбец Logo, чтобы соответствовать его содержимому.

body {
  margin: 40px;
}

.fill {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: gray;
}

.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;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto min-content 120px 120px auto;
  grid-template-areas: "... logo nav nav ..." "... sidebar content content ..." "... footer  footer  footer ...";
  background-color: #fff;
  color: #444;
}

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

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

<div class="wrapper">
  <div class="fill"></div>
  <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>

Возможно ли это с помощью CSS Grid, и если да, то как?

Answer 1

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

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

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-колоночный макет

Вы писали:

Первый столбец (логотип и боковая панель) должен сжиматься, чтобы соответствовать их содержанию - поэтому первый столбец будет настолько широким, насколько шире между логотипом / боковой панелью.Навигация / содержимое должно затем заполнить оставшееся пространство, разрешенное максимальной шириной.

Попробуйте:

.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>

Answer 2

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

У меня также есть требование иметь сплошной фон заливки, покрывающий всю ширину области просмотра (в соответствии с высотой логотипа переменной высоты / строки навигации)

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

1. Первое исправление logo и nav в первом ряду путем установки свойств grid-row и grid-column

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

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

См. Демонстрацию below:

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>