我想设计一个类似于链接 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;
}
最佳答案
稍微更改了您的 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>
关于html - 如何更改CSS中的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58254476/