Проблема с вложенным макетом CSS Grid

Question

Я пытаюсь добиться этого общего макета страницы рабочего стола с помощью сетки CSS…

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

У меня есть ручка того места, где я до сих пор . В качестве краткого изложения я использую сетку с 5 столбцами, чтобы попытаться достичь этого, с элементом Main, охватывающим первые три столбца, и определяю вложенную сетку внутри нее, чтобы помочь расположить текст и полноразмерное изображение / содержимое объекта. Вложенная сетка - то, где я получаю зависания, она не будет устанавливать текстовое содержимое в столбец 712px, как я хочу, вместо того, чтобы начинать его с начала вложенной сетки. Код ниже…

Из ручки…

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define main grid */
body {
  background-color: #efefef;
  display: grid;
  grid-template-columns: 180px 1fr 712px 1fr 180px; /* Last column must be 180px for masthead, and both columns to the left of 712 px should match both to the right, so mirroring the two sides */
  grid-template-rows: 1fr 70px; /* Not sure I need this? */
}

/* Masthead: Set at right of page, narrow column, full page height */
header {
  grid-column: 5 / 6;
  grid-row: 1 / 3;
  background: green;
}

/* Main content area:
   Should span from left edge to just before second to last .body column.
   Defining a nested grid here to position content. */
main {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  display: grid;
  grid-template: 180px 1fr 712px; /* Mimics body grid's first three columns */
}
  
  /* Centered/margined content: Should be centered to page at 712 px */
  main h2, main h3, main p {
    grid-column: 3 / 4; /* PROBLEM AREA: Should be centered to the 712 px column, for line length readability, but is starting at left edge instead. Cannot figure this out. */
    background: red;
  }

  /* Large content: Should fill all of main */
  .full {
    grid-column: 1 / 4;
    background: yellow;
  }

/* Footer: Should be centered like text safe content. This is behaving correctly. */
footer {
  grid-column: 3 / 4;
  grid-row: 2 / 2;
  background: blue;
}

<header>
  <h1>Masthead</h1>
</header>

<main>
  <h2>Content text</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus lectus nec nibh maximus, vel tincidunt lacus luctus. Aliquam sit amet sagittis dolor. Pellentesque feugiat nibh nec massa sagittis venenatis eu a purus. Nullam sed dignissim dolor. In fringilla egestas elit non sagittis.</p>
  <img class="full" src="#" alt="Content full size object"></img>
  <h3>Subhead</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus lectus nec nibh maximus, vel tincidunt lacus luctus. Aliquam sit amet sagittis dolor. Pellentesque feugiat nibh nec massa sagittis venenatis eu a purus. Nullam sed dignissim dolor. In fringilla egestas elit non sagittis.</p>
<img class="full" src="#" alt="Content full size object"></img>
<h3>Subhead</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus lectus nec nibh maximus, vel tincidunt lacus luctus. Aliquam sit amet sagittis dolor. Pellentesque feugiat nibh nec massa sagittis venenatis eu a purus. Nullam sed dignissim dolor. In fringilla egestas elit non sagittis.</p>
</main>

<footer>
  <h1>Footer</h1>
</footer>

Answer 1

Спасибо G-Cyr за это;Мне не хватало grid-template-columns на .main, у меня был только grid-template. Проблема решена.

Answer 2

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

.container {
    display: grid;
    grid-template-columns: .5fr 1fr 80px 120px;
    grid-template-rows: 1fr 80px repeat(2, 1fr);
    height: 60rem;
    text-align: center;
    margin: 1rem;
}
.one {
    grid-column: 1/3;
    grid-row: 1/2;
    background-color: yellow;
}
.two {
    grid-column: 3/4;
    grid-row: 1/ -1;
    background-color: #3f3ff3;
}
.two>h1, .three>h1 {
    transform: rotate(90deg);

}
.three {
    grid-column: 4 /-1;
    grid-row: 1/-1;
    background-color: greenyellow;
}
.four {
    grid-column: 1/2;
    grid-row: 2/3;
    background-color: hotpink;
}
.five {
    grid-column: 2/3;
    grid-row: 2/3;
    background-color: red;
}
.six {
    grid-column: 1/3;
    grid-row: 3/4;
    background-color: yellow;
}
.seven {
    grid-column: 2/3;
    grid-row: 3/4;
    background-color: thistle;
}
.eight {
    grid-row: 3/-1;
    grid-column: 1/2;
    background-color: tomato;
}
.nine {
    background-color: yellowgreen;
}
p {
    text-transform: uppercase;
    font-size: 2rem;
}

<div class="container">
    <div class="one">
        <h1>Fluid Grid</h1>
        <p>Should extend to left edge <br>Max-Width 100% </p>
    </div>
    <div class="two">
        <h1>Object Full</h1>
    </div>
    <div class="three">
        <h1>Text & Forms</h1>
    </div>
    <div class="four">
        <h1>Fluid Grid</h1>
    </div>
    <div class="five">
        <h1>Objects and Forms</h1>
    </div>
    <div class="six">
        <h1>Fluid Grid</h1>
    </div>
    <div class="seven">
        <h1>Fluid Grid</h1>
        <p>Should extend to left edge <br>Max-Width 100% </p>
    </div>
    <div class="eight">
        <h1>Fluid Grid</h1>
    </div>
    <div class="nine">
        <h1>Footer</h1>
    </div>
</div>