编写响应式2 (50%) /3 (33%)列CSS-网格布局的最有效方法？
编写响应式2 (50%) /3 (33%)列CSS-网格布局的最有效方法？
提问于 2019-04-27 23:42:24
我目前正在尝试使用CSS grid来布局一个相当简单的响应式图像网格(见下图)
我正在尝试创建的CSS网格布局的静态图像：
第一行将显示两个图像(均为50%宽度)，第二行将显示三个图像(均为33% )。
我对使用Flexbox的布局没有任何问题，但是CSS Grid解决方案对我来说并不存在。顺便说一句，我还在尝试使用CSS Grid，所以问题可能出在我身上？这种布局可行吗？任何提示/技巧都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55882190
复制相关文章
相似问题