Is there a way to force divs into individual subgrids with CSS?-CodePudding

I've been given a bunch of text I need to display in two columns. Is it possible to use CSS subgrids in a way that different divs are forced into one column or the other? I'd like to display all the .title's in the left column, and the .card's in the right column. Any way to do this? Dynamic example: 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 >
  <article >
    <h2>This is the heading</h2>
    <p>This is the body of the card.</p>
  </article>
  <article >
    <h2>This should be in the right column only.</h2>
    <p>This is the body of the card.</p>
  </article>
  <article >
    <h2>This is the heading</h2>
    <p>This is the body of the card.</p>
  </article>
  <article >
    <h2>Title</h2>
    <p>Should be in the left column only.</p>
  </article>
  <article >
    <h2>This is the heading</h2>
    <p>This is the body of the card.</p>
  </article>
  <article >
    <h2>This is the heading</h2>
    <p>This is the body of the card.</p>
  </article>
  <article >
    <h2>This is the heading</h2>
    <p>This is the body of the card.</p>
  </article>
  <article >
    <h2>Title</h2>
  </article>
</div>

Thanks!

CodePudding user response：

.card{
grid-area:card;
}
.title{
grid-area:title;
}

add grid-area property in .card and .title

CodePudding user response：

Don't use template areas, just assign the elements to their respective column and set the flow to column.

body {
  padding: 50px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 0.3fr 1.4fr;
  grid-auto-flow: column;
}

.card {
  border: 5px solid rgb(111, 41, 97);
  grid-row: auto / span 2;
  display: grid;
  gap: 0;
  grid-template-rows: subgrid;
  grid-column: 2
}

.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;
  grid-column: 1;
}

.title h2 {
  background-color: rgba(11, 31, 27, .4);
  padding: 10px;
  margin: 0;
}

.title p {
  padding: 10px;
  margin: 0;
}

<div >
  <article >
    <h2>Text</h2>
    <p>This should be in the right column only.</p>
  </article>
  <article >
    <h2>Text</h2>
    <p>This should be in the right column only.</p>
  </article>
  <article >
    <h2>Text</h2>
    <p>This should be in the right column only.</p>
  </article>
  <article >
    <h2>Title</h2>
    <p>Should be in the left column only.</p>
  </article>
  <article >
    <h2>Text</h2>
    <p>This should be in the right column only.</p>
  </article>
  <article >
    <h2>Text</h2>
    <p>This should be in the right column only.</p>
  </article>
  <article >
    <h2>Text</h2>
    <p>This should be in the right column only.</p>
  </article>
  <article >
    <h2>Title</h2>
    <p>Should be in the left column only.</p>
  </article>
</div>