css - 嵌套 CSS 网格布局问题

Question

我正在尝试使用 CSS 网格实现整体桌面页面布局...

简单来说，某些页面(例如我的博客)将在页面中心设置文本格式以提高可读性，但有时我会希望有一个英雄图像或另一个从页面左边缘运行的大图像屏幕到文本区域的右边缘(作为我放置在页面右侧的固定宽度报头的一种平衡)。我试图用 CSS Grid 来实现这一点，但我很困惑，因为黄色和红色的行为并不像我预期的那样。

我有一个pen here of where I'm at thus far 。作为快速总结，我使用 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

我不确定您想做什么，但我仅使用网格制作了一个与您此处的布局相匹配的布局。看看它可能对您的问题有所帮助。

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