Пробовал, но получилось так. как на желтой картинке,
1 ответ
.grid-container {
display: inline-grid;
grid-template-columns: repeat(4, 250px);
grid-template-rows: 250px 250px;
grid-gap: 5px 5px;
grid-template-areas:
"watch watch tour tour"
"watch watch tips movies";
padding: 5px;
background-color: #f0f1f5;
box-shadow: 0 5px 15px -5px #000;
}
.grid-container div {
background-size: 1080px 557px;
background-image: url(https://i.stack.imgur.com/XWYw8.jpg);
}
.watch { grid-area: watch; background-position: -25px -15px; }
.tour { grid-area: tour; background-position: -538px -15px; }
.tips { grid-area: tips; background-position: -538px -272px; }
.movies { grid-area: movies; background-position: -795px -272px; }
<div class="grid-container">
<div class="watch"></div>
<div class="tour"></div>
<div class="tips"></div>
<div class="movies"></div>
</div>