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

Размещение элементов сетки с помощью свойства 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;
            }