我想知道如何在块元素（例如<section>标记）中“突破”其固有的矩形中的元素。使用CSS网格。
查看所需最终结果的this example。理想情况下，它会保持<article>标记的完整性，同时还允许<header>，<figcaption>和<img>等子项围绕父网格移动 - 在旁边或之前其他父级元素，例如<nav>。出于可视化目的，此示例的标记特意不佳。
我正在使用Jekyll来生成我的博客帖子，并希望中的元素一个Markdown-to-HTML生成的帖子（例如图片，图片标题）在视觉上分开 - 从其他页面元素中混合。这意味着我无法使用<div>或<section>标记对帖子进行预格式化。
<body>
<nav>
<h1>Nav header</h1>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</nav>
<article>
<header>
<h1>Article header</h1>
<p>Posted today</p>
</header>
<h2>Article body</h2>
<p>Behold was them gathered bring brought sea called. Stars given and, which life.</p>
<p>Us divided may divide without bring given unto likeness together form you'll open let, which. Under. One kind have is.</p>
<figure>
<img src="https://images.unsplash.com/photo-1492854536278-1f94bbec5732?auto=format&fit=crop&w=1950&q=80" alt="Scotland">
<figcaption>This is the caption for the image on the right.</figcaption>
</figure>
<p>Very face, morning was is god wherein multiply was in. Void own.</p>
<p>Green. Called fish beast i creepeth. Is. Behold place which upon saw. Don't had. Earth. Darkness signs sea had had. Sea itself from. It given.</p>
</article>
</body>