具有CSS网格的等高不同宽高比框

Question

我正在尝试创建这样的布局：

右侧的橙色块都具有相同的纵横比，因此具有相同的高度。
蓝色块具有不同的宽高比。
蓝色块的高度和橙色块的总和应该相等，如图所示。

有没有办法通过CSS网格创建这样的布局？ 我知道我可以将橙色项目包装在一个单独的列元素中，但我想避免这种情况。 当每个项目的宽高比都是正方形时，我也设法创建了这个布局，但是这个没有运气...

关于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>

Answer 1

您可以使用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: "lr" "lr" "lr"; 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>

Answer 2

这是它的工作代码。 在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>

Answer 3

首先，我建议您阅读有关网格布局的更多信息。 这个链接可以帮到你。 让我们解决你的问题。 您案例中的每个div项都是一个网格项。 所以你应该给他们不同的风格。 首先，您应该为容器设置grid-template-columns和grid-template-rows 。 对于项目之后，您应该设置grid-column-start ， grid-column-end ， grid-row-start ， grid-row-end 。 看看上面关于网格布局的链接并试着解决它，这是我的解决方案，可以帮助你。 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;
}

具有CSS网格的等高不同宽高比框

问题描述

3 个解决方案

解决方案1
4 已采纳 2018-08-12 09:40:07

解决方案2
2 2018-08-12 09:58:29

解决方案3
0 2018-08-12 10:04:06

具有CSS网格的等高不同宽高比框

问题描述

3 个解决方案

解决方案1 4 已采纳 2018-08-12 09:40:07

解决方案2 2 2018-08-12 09:58:29

解决方案3 0 2018-08-12 10:04:06

解决方案1
4 已采纳 2018-08-12 09:40:07

解决方案2
2 2018-08-12 09:58:29

解决方案3
0 2018-08-12 10:04:06