Как разместить блоки с картинки 1 как на картинке 2 с помощью grid
?
Картинка(1)
Картинка(2)
body {
margin: 0;
padding: 0;
background: rgb(180, 177, 177);
}
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.inner {
display: flex;
flex-wrap: wrap;
}
.inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2vw;
}
.inner-item {
width: 300px;
height: 200px;
background-color: green;
}
<div class="container">
<div class="inner">
<div class="inner-item"></div>
<div class="inner-item"></div>
<div class="inner-item"></div>
</div>
</div>