html - 标题为全宽但内容受限时的 CSS 网格

Question

我是 CSS Grid 的新手，我在 Adob​​e XD 中设计了以下设计。

在设计上述内容时，我将页面拆分为 10 列网格，我希望使用名为模板的网格来实现上述布局，但我正在努力寻找一种简洁的方法。

我最初的想法是这样做:

但我相信这涉及到为左侧和右侧 (10/2) 创建空的 div。不好!<​​/p>

我没有画行，因为我想我已经弄清楚了，它将是 3 行(面包屑、标题、内容与元)。

什么是更好的方法？我创建了一个 codepen使用我当前的 HTML 结构。

<div class="deity-details">
  <header>
    <div class="breadcrumbs">
      <a href="#">Home</a> /
      <a href="#">Deities</a> /
      <a href="#">Athena</a>
    </div>
    <h1 class="deity-name">Athena</h1>
  </header>

  <section class="deity-description">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis commodo dictum. Nulla facilisi. Quisque urna ipsum, interdum eu posuere consectetur, dictum at metus. Integer id lorem quis purus tincidunt malesuada quis non ligula. Pellentesque congue pharetra nibh eu mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dictum urna urna, eget tincidunt ligula consectetur ut. Aliquam erat volutpat.</p>

<p>Etiam interdum iaculis pellentesque. Suspendisse potenti. Aliquam quis tortor tincidunt, maximus odio et, tempor eros. Curabitur a purus mauris. Sed in consequat augue. Mauris placerat ullamcorper congue. Sed elementum ligula tellus, vitae mattis diam tristique sed. Duis luctus tempor justo non ornare. Nam vel lobortis orci. Donec hendrerit porttitor consectetur. Curabitur non nunc laoreet, sagittis massa vitae, rhoncus turpis. Phasellus non scelerisque nibh, id feugiat risus. Cras elementum varius ex, vel accumsan risus laoreet eu. Morbi suscipit turpis nec dapibus fermentum.</p>
  </section>

  <section class="deity-meta">
    <div class="attributes">
      <div class="attribute">
        <label>Origin</label>
        <h4>Greek</h4>
      </div>
      <div class="attribute">
        <label>Aliases</label>
        <h4>None</h4>
      </div>
      <div class="attribute">
        <label>Sex</label>
        <h4>Female</h4>
      </div>
    </div>
  </section>
</div>

Answer 1

grid-template-areas & grid-area 如果你想稍后添加一些内容可能不需要，你可以使用 grid-template- columns(可在页眉上重复使用，最终在页脚上重复使用) 并将 grid-column 设置为 children:

.deity-details,
header {
  display: grid;
  grid-template-columns: repeat(10, 1fr)
}

header {
  grid-column: 1 /span 10;
  background: green;
}

.breadcrumbs,
.deity-name,
.deity-description {
  grid-column: 3 /span 3;
  background: green;
}

.deity-meta {
  grid-column: 7 / span 2;
  background: green;
}

<div class="deity-details">
  <header>
    <div class="breadcrumbs">
      <a href="#">Home</a> /
      <a href="#">Deities</a> /
      <a href="#">Athena</a>
    </div>
    <h1 class="deity-name">Athena</h1>
  </header>

  <section class="deity-description">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis commodo dictum. Nulla facilisi. Quisque urna ipsum, interdum eu posuere consectetur, dictum at metus. Integer id lorem quis purus tincidunt malesuada quis non ligula. Pellentesque
      congue pharetra nibh eu mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dictum urna urna, eget tincidunt ligula consectetur ut. Aliquam erat volutpat.</p>

    <p>Etiam interdum iaculis pellentesque. Suspendisse potenti. Aliquam quis tortor tincidunt, maximus odio et, tempor eros. Curabitur a purus mauris. Sed in consequat augue. Mauris placerat ullamcorper congue. Sed elementum ligula tellus, vitae mattis
      diam tristique sed. Duis luctus tempor justo non ornare. Nam vel lobortis orci. Donec hendrerit porttitor consectetur. Curabitur non nunc laoreet, sagittis massa vitae, rhoncus turpis. Phasellus non scelerisque nibh, id feugiat risus. Cras elementum
      varius ex, vel accumsan risus laoreet eu. Morbi suscipit turpis nec dapibus fermentum.</p>
  </section>

  <section class="deity-meta">
    <div class="attributes">
      <div class="attribute">
        <label>Origin</label>
        <h4>Greek</h4>
      </div>
      <div class="attribute">
        <label>Aliases</label>
        <h4>None</h4>
      </div>
      <div class="attribute">
        <label>Sex</label>
        <h4>Female</h4>
      </div>
    </div>
  </section>
</div>

网格 CSS 上不需要空元素。

---

你的笔叉着玩:https://codepen.io/gc-nomade/pen/mjVWqY

您可以将其用作提醒:https://css-tricks.com/snippets/css/complete-guide-grid/