Grid Masonry

HTML
            <div class="grid-container">
               <div class="item1"><img src="https://html5book.ru/wp-content/uploads/2019/03/grid-img-4.jpg"></div>
               <div class="item2"><img src="https://html5book.ru/wp-content/uploads/2019/03/grid-img-3.jpg"></div>
               <div class="item3"><img src="https://html5book.ru/wp-content/uploads/2019/03/grid-img-1.jpg"></div>
               <div class="item4"><img src="https://html5book.ru/wp-content/uploads/2019/03/post1.jpg"></div>
               <div class="item5"><img src="https://html5book.ru/wp-content/uploads/2019/03/post-img-3.jpg"></div>
               <div class="item6"><img src="https://html5book.ru/wp-content/uploads/2019/03/post-img-4.jpg"></div>
               <div class="item7"><img src="https://html5book.ru/wp-content/uploads/2019/03/post-img-2.jpg"></div>
           </div>

CSS
            .grid-container {
                max-width: 960px;
                margin: 50px auto;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: 200px;
                grid-gap: 10px;
                grid-auto-flow: dense;
            }
            .item5 {
                grid-column: span 2;
                grid-row: span 2;
            }
            .item6 {
                grid-column: span 3;
                grid-row: span 2;
            }