具有CSS网格的等高不同纵横比框答案

【问题标题】：Equal height different aspect ratio boxes with CSS grid具有CSS网格的等高不同纵横比框
【发布时间】：2019-01-19 07:24:38
【问题描述】：

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

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

有没有办法通过 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>

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：

这似乎破坏了蓝框的纵横比。您的代码使其等于橙色框的宽度，但事实并非如此。
谢谢，它有帮助，我尝试删除您添加的 :nth-child 样式，但没有发现任何区别。它们是干什么用的？这是否意味着可以避免grid-template-areas？
@Marvin3 在这种特殊情况下是的，您可以删除第 n 个子元素，因为元素是相同的，并且默认情况下它们会占用正确的区域，但这里需要 grid-template-areas
@Marvin3 我添加了另一个简化版本；）

【解决方案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>

【讨论】：

【解决方案3】：

首先，我建议您阅读有关网格布局的更多信息。这个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;
}

【讨论】：