html - 如何在css中更改网格
问题描述
我想设计一个类似于链接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 Grid 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>
推荐阅读
- amazon-web-services - 有没有办法限制对 s3 预签名 url 的访问
- assembly - 汇编中的函数是什么?
- javascript - 如何使用 React 将输入值附加到 HTML 元素中
- openshift - 如何在 Openshift 中使用命令行更新limits.memory?
- python - pandas:计算列表中每个元素在列表列中的唯一出现次数
- uml - PlantUML:如何
在图例和页脚与标题间距之间插入换行符? - angular - 如何使用猫鼬快递和角度从数组中删除特定对象
- vb.net - 如何在水晶报表的详细信息部分底部放置一条水平线
- html - 即使遵循模板,图像映射也不起作用
- excel - 如何根据另一个单元格中的文本对一个字母对应一个值的行求和?