html css grid use article area with columns, header as row above

Question

Im looking for a possibility to use a row for a header with the following articles in columns. As I added the h2 semantically to the article_area I want to realise these two parts in different layouts inside one object.

Currently it looks like this:

.article_area {
  text-align: justify;
  display: grid;
  gap: 10px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

<section class="article_area">
  <h2>New Content</h2>
  <article>
    <header>
      <h2>Headline</h2>
    </header>
    <figure></figure>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac est sed quam finibus hendrerit. Suspendisse nunc mauris, rhoncus non ipsum et, finibus imperdiet magna. In dignissim pharetra lectus non.
    </p>
    <footer></footer>
  </article>
</section>

Answer 1

You just need to add the title as part of the grid. As one of the columns, you can expand it to occupy the entire length of the row. Code snippet available with borders to understand how it works.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid red;
  text-align: center;
  padding: 10px;
  gap: 20px;
 }
 
.title-container {
  grid-column: 1/-1;
  border: 1px solid green;
 
}

.article {
  border: 1px solid blue;
}
  

<div class="grid-container"> 
  <div class="title-container">
    <h2>Some title</h2>
  </div>
  <div class="article">
    <h2>Some title</h2>
    <p>Article content</p>
  </div>
  <div class="article">
    <h2>Some title</h2>
    <p>Article content</p>
  </div>
  <div class="article">
    <h2>Some title</h2>
    <p>Article content</p>
</div>