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

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

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;
            }