https://codepen.io/Concencuc/pen/jOrBwxj
section#gallery {
max-width: 1500px;
margin: 0 auto;
.images {
margin-top: 120px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 6%;
grid-row-gap: 70px;
-ms-grid-columns: 1fr 6% 1fr 6% 1fr;
-ms-grid-rows: 70px 6% 70px;
}
.images img {
background: brown;
max-width: 100%;
width: 100%;
margin-top: 20px;
}
.images .first__image {
grid-area: ~'1/1/2/2';
margin: 0;
}
.images .second__image {
grid-area: ~'1/2/3/4';
margin: 0;
}
.images .three__image {
grid-area: ~'2/1/4/2';
}
.images .four__image {
grid-area: ~'3/2/4/3';
width: 65%;
}
.images .five__image {
grid-area: ~'3/3/5/4';
}
.images .six__image {
grid-area: ~'4/1/7/2';
margin: 0;
}
.images .seven__image {
grid-area: ~'4/2/7/3';
margin: 0;
}
.images .eight__image {
grid-area: ~'5/3/8/4';
}
.images .nine__image {
grid-area: ~'7/1/9/3';
margin: 0;
}
.images .ten__image {
grid-area: ~'8/3/9/4';
}
}
Простой
