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>

Answer 2

感谢G-Cyr；我在.main上缺少grid-template-columns，我只有grid-template。问题已解决。

嵌套CSS网格布局问题

2 个答案: