How do I make the first row of a CSS Grid TEXT grid-area shorter?

Question

I am new to CSS Grid, but found it fascinating and perfect for designing layouts for articles on my personal website. It's hard for me to articulate the problem I am having, but I have visual aids for where I'm trying to get. I was inspired by the layout of an article I saw during a YouTube video of a Coding Tech presentation on CSS Grid which can be seen here in this picture.

The first fraction of the row directly underneath the featured image shows the article's author information, and the rest of the row is used to begin the article's actual content, its text. I tried to replicate this design with CSS Grid with the code as follows.

.article-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(5rem, auto);
    grid-template-areas:
        "title title title title"
        "image image image image"
        "author body body body"
        "body body body body";
}


.article-title {
    grid-area: title;
}
.featured-image {
    grid-area: image;
}
.author-info {
    grid-area: author;
}
.article-body {
    grid-area: body;
    text-align: left;

}

<div v-if="load" class="article-grid container">

    <h1 class="article-title">{{post.title}}</h1>
    <img v-if="post.featured_image" :src="post.featured_image" alt="" class="featured-image">
    <div class="author-info">Author</div>
    <article class="article-body" v-html="post.body"></article>
</div>

This snippet of code has all of the content in the grid assigned to the bottom right cell of the 4x4 grid for some reason, which turns everything into a huge mess overlapping each other. If I cut out the "author body body body" line, it goes back to normal, with Title and Image taking the first two rows and body overflowing the bottom row with all of the article's text. It acts up when I try to start the text on a row where a cell is occupied by something other than the body's text. I hope I presented my problem effectively.

Answer 1

grid-areas MUST be rectangular, which the author grid-area is messing up for the body

If you need the article text to wrap directly under the author section (I can't tell if this is what's happening in the screenshot) you cannot accomplish this with just css grid as far as I know. You can accomplish this effect by getting rid of the "author" grid-template-area, combine the author and body in a container div in the body grid-area and float the image, like so:

.article-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(5rem, auto);
    grid-template-areas:
        "title title title title"
        "image image image image"
        "author body body body"
        "body body body body";
}
.article-text {
    grid-area: body
}
.author-info {
    float: left;
    width: 100px; //or whatever width you want
}

If not, change the bottom left area name in grid-template-areas to "author", and that entire column will be blank below your author info.