如何解决CSS网格1顶部3底部
我试图制作一个在顶部显示1张图像,在底部显示3张单独图像的照片网格。
有人知道吗?
解决方法
You can read more about CSS GRID on this tutorial.
You can use a grid generator like this to make it easily.
请注意,我在每个div
上都放置了一个红色的5px实线边框,因此它更加可见。
您可以放置img src="Your url"
,以显示图片
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"main-photo main-photo main-photo"
"main-photo main-photo main-photo"
"photo1 photo2 photo3";
}
div{
border:5px solid red;
}
.main-photo { grid-area: main-photo; }
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }
.photo3 { grid-area: photo3; }
<div class="grid-container">
<div class="main-photo"><img src=""></img></div>
<div class="photo1"><img src=""></img></div>
<div class="photo2"><img src=""></img></div>
<div class="photo3"><img src=""></img></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。