Question

我对CSS Grid相当陌生，并且具有以下在Adobe XD中绘制的设计。

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

我最初的想法是这样做：

但是我相信这涉及到我为左右（10/2）创建空的div。不好！</ p>

我没有画行，因为我想我已经弄清楚了，它将是3行（面包屑，标题，带有元内容的内容）。

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

<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设置为子级：

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

标头为全角但内容受限制时的CSS网格

1 个答案: