如何更改css中的网格

Question

我想设计一个类似于链接https://imgur.com/a/yGdgMWZ的网格。这是我的代码，但看起来不一样。你能告诉我一种优化这段代码的方法吗?因为它看起来太糟糕了。HTML链接：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

稍微改变了你的css。运行代码片段，我使网格与图像相同。这里很难解释网格是如何工作的，所以我建议您检查一下

CSS网格MDN ](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)

看一看，你就会明白网格是如何工作的。

​

.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>

​