嵌套 CSS 网格布局问题

Question

我正在尝试使用 CSS 网格来实现整个桌面页面布局……

简而言之，某些页面（例如我的博客）会在页面中心设置文本格式以提高可读性，但有时我会希望有一个主图或另一个从左边缘延伸的大图文本区域右侧边缘的屏幕（作为我放置在页面右侧的固定宽度标头的一种平衡）。我正在尝试使用 CSS Grid 来实现这一点，但我很困惑，因为黄色和红色的行为不像我预期的那样。

我有一个pen here of where I'm at thus far。作为一个快速总结，我使用 5 列网格布局来尝试实现这一点，主元素跨越前三列，并在其中定义一个嵌套网格以帮助定位文本和全尺寸图像/对象内容。嵌套网格是我挂断的地方，它不会像我想要的那样将文本内容设置为 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

我不确定您要做什么，但我使用网格创建了一个与您在此处的布局相匹配的布局。看看它可能会帮助您解决问题。

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

Answer 2

为此感谢 G-Cyr；我在 .main 上缺少网格模板列，我只有网格模板。问题已解决。