How to change grid in css - html

Question

I want to design a grid like the one in link https://imgur.com/a/yGdgMWZ. This is my code but it doesn't look alike. And can you show me a way to optimize this code cause it look too bad.
HTML link: https://codesandbox.io/s/thirsty-sea-eo3q3
.third-part{
height:80vh;
}
.third-part p{
text-align: center;
}
.London{
grid-area: box-1;
}
.Paris{
grid-area: box-2;
}
.Dubai{
grid-area: box-3;
}
.Amsterdam{
grid-area: box-4
}
.Athens{
grid-area: box-5;
}
.Newyork{
grid-area: box-6;
}
.Barcelona{
grid-area: box-7;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap:2em;
grid-template-areas:
"box-1 box-2 box-3 box-3"
"box-4 box-5 box-3 box-3"
"box-4 box-6 box-6 box-7";
}
.grid div{
background-color: #ddd;
}

Answer 1

Changed your css a bit. Run the code snippet i made the grids same as the image. It's hard to explain here how grid works, so i suggest you should check
[CSS Grid MDN] ](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
and give a look, you will understand how grids function.
.third-part{
height:80vh;
}
.third-part p{
text-align: center;
}
.London{
}
.Paris{
}
.Dubai{
grid-column: 3/5;
grid-row: 1/3;
}
.Amsterdam{
grid-row: 2/4;
}
.Athens{
}
.Newyork{
grid-column: 2/4;
}
.Barcelona{
}
.grid{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 20px;
grid-auto-rows: 150px;
}
.grid div{
background-color: #ddd;
}
<div class="third-part">
<p>Popular Places</p>
<div class="grid">
<div class="London">London, United Kingdom</div>
<div class="Paris">Paris, France</div>
<div class="Dubai">Dubai, United Arab Emirates</div>
<div class="Amsterdam">Amsterdam, Netherlands</div>
<div class="Athens">Athens, Greece</div>
<div class="Newyork">New York, Ny</div>
<div class="Barcelona">Barcelona, Spain</div>
</div>