具有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:
    "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>