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

Размещение элементов сетки с помощью именованных линий сетки

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-rows: [start] 200px [row2] 200px [row3] 200px [row-end];
    grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [col-end];
}
.post-1 {
    display: flex;
    background: #fff;
    border: 10px solid #efddd0;
    grid-row-start: span 2;
    grid-column-start: span 2;                    
}        
.post-2 {
    background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-3.jpg);
    grid-row-start: start;
    grid-column-start: col3;
}        
.post-3 {
    background: #f4efe9;
    grid-row-start: row2;
    grid-column-start: col3;
}        
.post-4 {
    background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-1.jpg);
    grid-row-start: row3;
    grid-column-start: col3;
    order: 6;
}        
.post-5 {
    background: #f4efe9;
    grid-row-start: row3;           
    grid-column-start: col2;
    order: 5;
}        
.post-6 {
    background-image: url(https://html5book.ru/wp-content/uploads/2019/03/grid-img-4.jpg);
    grid-row-start: row3;            
    grid-column-start: start;
    order: 4;
}