<section>
<h1>My Awesome Blog</h1>
<article>
<h2>Title #1</h2>
<p>Ingress #1</p>
</article>
<article>
<h2>A title that spans multiple lines</h2>
<p>Ingress #2</p>
</article>
<article>
<h2>Title #3</h2>
<p>Ingress #3</p>
</article>
<article>
<h2>Title #4</h2>
<p>Ingress #4</p>
</article>
</section>
section {
margin: 0 auto;
max-width: 350px;
display: grid;
grid-gap: 10px;
grid-auto-flow: dense;
grid-template-rows: repeat(2, 1fr);
}
h1 {
grid-column: 1 / span 2;
}
article {
display: contents;
}
article:nth-child(even) h2,
article:nth-child(even) p {
grid-column: 1;
}
article:nth-child(odd) h2,
article:nth-child(odd) p {
grid-column: 2;
}
h1, h2, p {
margin: 0;
border: 1px solid black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.