当标题为全宽但内容受约束时的CSS网格

我对CSS网格还比较陌生,我在Adobexd中绘制了以下设计。

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

我最初的想法是这样做:

但我相信这需要我为左右两侧创造出空的分隔带(10/2)。不太好!

我没有画这些行,因为我想我已经弄清楚了,它将是3行(breadcrumbs,title,content with meta)。

更好的方法是什么?我已经创建了一个 codepen with my current html structure.

<div class=“deity details”>
<标题>
<DIV class=“面包屑”>
<a href=“”>主页</a>。/
<a href=“”>指示</a>。/
<a href=“”>雅典娜</a>
</DIV>
<h1 class=“deity name”>雅典娜</h1>
</header>

<section class=“设备描述”>
<P>Lorem Ipsum Dolor Sit Amet,神圣的爱你的精英。莫利斯通讯录。仪表板无孔。奎斯克乌尔纳伊普萨姆,欧波苏埃勋章,梅特斯的名言。整数id lorem quis purus tincidunt malesuada quis non ligula。Pellentesque congue pharetra nibh eu mattis公司。居住者摩尔比·特里斯蒂克·塞内克图斯、内图斯和马列苏达都是土耳其人。生活格言乌尔纳乌尔纳,Eget tincidunt ligula contietteur ut.aliquam erat volutionpat.</p>

<P>Etiam Interdum Iaculis Pellentesque。悬浮电位。Aliquam Quis Tortor Tincidunt,Maximus Odio et,Tempor Eros.库拉比图尔·毛里求斯。在康塞夸特奥格。毛里斯普拉斯拉特·乌兰姆科珀·康格。小叶女贞素,维塔玛提斯直径。杜伊斯卢克图斯的节拍是非奥纳雷。南维尔·洛波提斯·奥奇。请务必遵守。Curabitur non Nunc Laoreet、Sagittis Massa Vitae、Rhoncus Turpis。Phasellus non-scelerisque nibh,ID Feugiat Risus。在欧洲,你可以选择不同的元素。Morbi Suscipit Turpis nec dapibus measurium.</p>
</section>

<section class=“deity meta”>
<div class=“attributes”>
<div class=“attribute”>
<label>原点</label>
<h4>希腊语</h4>
</DIV>
<div class=“attribute”>
<label>别名</label>
<h4>无</h4>
</DIV>
<div class=“attribute”>
<label>性别</label>
<H4>女性</H4>
</DIV>
</DIV>
</section>
</DIV>


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

我最初的想法是这样做:



但我相信这需要我为左右两侧创造出空的分隔带(10/2)。不太好!

我没有画这些行,因为我想我已经弄清楚了,它将是3行(breadcrumbs,title,content with meta)。

更好的方法是什么?我创造了一个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>