Назад к статье

Размещение элементов сетки с помощью свойства grid-template-areas

Lorem ipsum dolor sit amet

Quisque nisi libero, egestas non bibendum quis, sodales facilisis libero. Nulla ultricies ipsum et lobortis ultrices.

HTML
 <div class="grid-container">
    <article class="post-1">
        <div class="post-inner">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Quisque nisi libero, egestas non bibendum quis, sodales facilisis libero. Nulla ultricies ipsum et lobortis ultrices.</p>
        </div>
    </article>
    <article class="post-2"></article>
    <article class="post-3">
        <div class="post-inner">
            <h3>New arrivals</h3>
            <a href="">Learn more</a>
        </div>
    </article>
    <article class="post-4"></article>
    <article class="post-5">
        <div class="post-inner">
            <h3>New arrivals</h3>
            <a href="">Learn more</a>
        </div>
    </article>
    <article class="post-6"></article>
</div>
CSS
.grid-container {
    max-width: 960px;
    margin: 50px auto;
    display: grid;
    grid-template-areas: "post-1 post-1 post-2"
                         "post-1 post-1 post-3"
                         "post-6 post-5 post-4";
    grid-template-rows: repeat(3, 200px);
    grid-template-columns: repeat(3, 1fr);
}
.post-1 {
    display: flex;
    background: #fff;
    border: 10px solid #efddd0;
    grid-area: post-1;                    
}        
.post-2 {
    background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-3.jpg);
    grid-area: post-2;
}        
.post-3 {
    background: #f4efe9;
    grid-area: post-3;
}        
.post-4 {
    background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-1.jpg);
    grid-area: post-4;
}        
.post-5 {
    background: #f4efe9;
    grid-area: post-5;
}        
.post-6 {
    background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-4.jpg);
    grid-area: post-6;
}