我正在尝试使用 CSS 3 Grid 使用我导入的图像对我的主页进行一些特定的放置。这就是我想要实现的目标:
这就是我目前网格上的内容:
这是我的代码:
<div class="wrapper">
<div class="bed"><img src="http://placehold.it/300x300" alt=""></div>
<div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>
<div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>
<div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>
<div class="sofa"><img src="http://placehold.it/300x300" alt=""></div>
</div>
@endsection
@push('style')
<style>
.wrapper{
display: grid;
grid-template-columns: 1fr 0.5fr 1fr ;
grid-auto-rows: minmax(100px,auto);
padding: 1em;
}
.wrapper >div{
padding: 1em;
}
.bed{
height: 50%;
}
.pillow{
height: 50%;
width:100%;
}
.kitchen{
height: 50%;
}
.living-room{
height: 70%;
width:150%;
}
.sofa{
height: 50%;
width:150%;
}
img{
width:100%;
height: 100%;
border-radius: 20px;
}
如何排列图像,使其与预期结果完全一致?
慕尼黑8549860
相关分类