我目前正在尝试使用CSS grid来布局一个相当简单的响应式图像网格(见下图)
我正在尝试创建的CSS网格布局的静态图像:
第一行将显示两个图像(均为50%宽度),第二行将显示三个图像(均为33% )。
我对使用Flexbox的布局没有任何问题,但是CSS Grid解决方案对我来说并不存在。顺便说一句,我还在尝试使用CSS Grid,所以问题可能出在我身上?这种布局可行吗?任何提示/技巧都将不胜感激。
发布于 2019-04-28 00:39:14
下面是一个例子。您可以使用这些单元来满足您的大小要求。代码如下:
//HTML
<div class="gridcontainer">
<div class="bigimage1"></div>
<div class="bigimage2"></div>
<div class="smallimage1"></div>
<div class="smallimage2"></div>
<div class="smallimage3"></div>
</div>
//CSS
.gridcontainer{
background: #666;
border: .65vw solid #666;
display: grid;
height: 81.75vh;
width: 57.5vw;
grid-gap: .7vw;
grid-template-columns: 9vw 9vw 9vw 9vw 9vw 9vw;
grid-template-rows: 48vh 32.5vh;
grid-template-areas:
"bigimageleft bigimageleft bigimageleft bigimageright bigimageright bigimageright"
"smallimageleft smallimageleft smallimagecenter smallimagecenter smallimageright smallimageright";
}
.bigimage1{
grid-area: bigimageleft;
background: white;
}
.bigimage2{
grid-area: bigimageright;
background: white;
}
.smallimage1{
grid-area: smallimageleft;
background: white;
}
.smallimage2{
grid-area: smallimagecenter;
background: white;
}
.smallimage3{
grid-area: smallimageright;
background: white;
}
看看这里的一个例子:https://jsfiddle.net/L5gbfv7m/11/
https://stackoverflow.com/questions/55882190
复制相似问题