Is there a way to use CSS subgrids to display different divs in two columns, with all the .title's in the left column and the .card's in the right column? Here is a dynamic example for reference: https://codepen.io/dancanuck/pen/eYMLqzR
body {
padding: 50px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}
.grid {
display: grid;
gap: 20px;
grid-template-columns: 0.3fr 1.4fr;
grid-template-areas: "title card";
}
.card {
border: 5px solid rgb(111, 41, 97);
grid-row: auto / span 2;
display: grid;
gap: 0;
grid-template-rows: subgrid;
}
.card h2 {
background-color: rgba(111, 41, 97, .4);
padding: 10px;
margin: 0;
}
.card p {
padding: 10px;
margin: 0;
}
.title {
border: 5px solid rgb(111, 41, 97);
grid-row: auto / span 2;
display: grid;
gap: 0;
grid-template-rows: subgrid;
}
.title h2 {
background-color: rgba(11, 31, 27, .4);
padding: 10px;
margin: 0;
}
.title p {
padding: 10px;
margin: 0;
}<div class="grid">
<article class="card">
<h2>This is the heading</h2>
<p>This is the body of the card.</p>
</article>
<article class="card">
<h2>This should be in the right column only.</h2>
<p>This is the body of the card.</p>
</article>
<article class="card">
<h2>This is the heading</h2>
<p>This is the body of the card.</p>
</article>
<article class="title">
<h2>Title</h2>
<p>Should be in the left column only.</p>
</article>
<article class="card">
<h2>This is the heading</h2>
<p>This is the body of the card.</p>
</article>
<article class="card">
<h2>This is the heading</h2>
<p>This is the body of the card.</p>
</article>
<article class="card">
<h2>This is the heading</h2>
<p>This is the body of the card.</p>
</article>
<article class="title">
<h2>Title</h2>
</article>
</div>Thanks!