具有CSS网格的等高不同纵横比框
具有CSS网格的等高不同纵横比框
提问于 2018-08-12 17:26:47
我正在尝试创建这样的布局：
右侧的
- 橙色块都具有相同的长宽比，因此高度也相同。
- 蓝色块具有不同的长宽比。蓝色块的
- 高度和橙色块的总和应该相等，如图所示。
有没有办法通过CSS网格创建这样的布局？我知道我可以将橙色项包装在单独的column元素中，但我希望避免这种情况。当每个项目的纵横比都是方形时，我也设法创建了这个布局，但这个没有运气…
jsfiddle http://jsfiddle.net/fq974gov/示例
.grid {
display: grid;
grid-gap: 10px;
width: 200px;
}
.item-left {
background: lightblue;
padding-bottom: 120%;
}
.item-right {
background: tomato;
padding-bottom: 60%;
}<div class="grid">
<div class="item-left"></div>
<div class="item-right"></div>
<div class="item-right"></div>
<div class="item-right"></div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-12 17:40:07
您可以使用grid-template-columns定义模板区域和控制比率
.grid {
display: grid;
grid-template-areas:
"l1 r1"
"l1 r2"
"l1 r3";
grid-template-columns:3fr 2fr; /*adjust this as you like*/
grid-gap: 10px;
width: 200px;
animation:change 2s infinite alternate linear;
}
.item-left {
grid-area:l1;
background: lightblue;
/*padding-bottom: 120%; no more needed*/
}
.item-right {
background: tomato;
padding-bottom: 60%;
}
.item-right:nth-child(2) {
grid-area:r1;
}
.item-right:nth-child(3) {
grid-area:r2;
}
.item-right:nth-child(4) {
grid-area:r3;
}
@keyframes change{
to{width:300px;}
}<div class="grid">
<div class="item-left"></div>
<div class="item-right"></div>
<div class="item-right"></div>
<div class="item-right"></div>
</div>
代码可以简化为：
.grid {
display: grid;
grid-template-areas:
"l r"
"l r"
"l r";
grid-template-columns:3fr 2fr; /*adjust this as you like*/
grid-gap: 10px;
width: 200px;
animation:change 2s infinite alternate linear;
}
.item-left {
grid-area:l;
background: lightblue;
}
.item-right {
background: tomato;
padding-bottom: 60%;
}
@keyframes change{
to{width:300px;}
}<div class="grid">
<div class="item-left"></div>
<div class="item-right"></div>
<div class="item-right"></div>
<div class="item-right"></div>
</div>
Stack Overflow用户
发布于 2018-08-12 17:58:29
这是它的工作代码。在JSFiddle上查看它
<html>
<head>
<title>Grid View</title>
</head>
<style>
.grid {
display: grid;
grid-gap: 10px;
width: 500px;
grid-template-areas:
"a a b b"
"a a c c"
"a a d d"
;
}
.item-left {
background: lightblue;
padding-bottom: 120%;
grid-area: a;
}
.item-right {
background: tomato;
padding-bottom: 40%;
}
#grid_b {
grid-area: b;
}
#grid_c {
grid-area: c;
}
#grid_d {
grid-area: d;
}
</style>
<body>
<div class="grid">
<div id="grid_a" class="item-left"></div>
<div id="grid_b" class="item-right"></div>
<div id="grid_c" class="item-right"></div>
<div id="grid_d" class="item-right"></div>
</div>
</body>
</html>Stack Overflow用户
发布于 2018-08-12 18:04:06
首先，我建议你阅读更多关于网格布局的内容。此link可能会对您有所帮助。让我们来解决你的问题。案例中的每个div项都是一个网格项。所以你应该给他们不同的风格。首先需要设置容器的grid-template-columns和grid-template-rows。之后，对于项目，您应该设置grid-column-start、grid-column-end、grid-row-start、grid-row-end。看看上面关于网格布局的link，试着解决它，这是我的解决方案，可能会对你有帮助。https://jsfiddle.net/sghgh1996/0cf39bm1/
HTML：
<div class="grid">
<div class="item-left">
</div>
<div class="item-right row1">
</div>
<div class="item-right row2">
</div>
<div class="item-right row3">
</div>
</div>CSS：
.grid {
display: grid;
grid-gap: 10px;
width: 200px;
grid-template-columns: 50% 50%;
grid-template-rows: 33.333% 33.333% 33.333%;
}
.item-left {
background: lightblue;
padding-bottom: 120%;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 6;
}
.item-right {
background: tomato;
padding-bottom: 60%;
}
.row1{
grid-row-start: 1;
grid-row-end: 2;
}
.row2{
grid-row-start: 3;
grid-row-end: 4;
}
.row3{
grid-row-start: 5;
grid-row-end: 6;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51807504
复制相关文章
相似问题
腾讯云开发者
