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

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