等高不同宽高比的CSS网格框 [英] Equal height different aspect ratio boxes with CSS grid

问题描述

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

• 右侧的橙色块都具有相同的长宽比，因此高度也是如此。


• 蓝色块的长宽比不同。


• 蓝色图块的高度和橙色图块的总和应该相等，如图所示。

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

jsfiddle上的示例 http://jsfiddle.net/fq974gov/

  .grid {display：grid; grid-gap：10px;宽度：200像素；}。item-left {背景：浅蓝色； padding-bottom：120％;}。item-right {背景：番茄； padding-bottom：60％;}  

 < div类= grid> < div class = item-left>< / div> < div class = item-right>< / div> < div class = item-right>< / div> < div class = item-right>< / div>< / div>  

解决方案

您可以使用 grid-template-columns

  .grid {display：grid;网格模板区域： l1 r1 l1 r2 l1 r3; grid-template-columns：3fr 2fr; / *随意调整* / grid-gap：10px;宽度：200像素； animation：change 2s无限交替线性；}。item-left {grid-area：l1;背景：浅蓝色； / * padding-bottom：120％;不再需要* /}。item-right {背景：番茄； padding-bottom：60％;}。item-right：nth-​​child（2）{grid-area：r1;}。item-right：nth-​​child（3）{grid-area：r2;}。item-right ：nth-​​child（4）{网格区域：r3;} @关键帧更改{变为{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; / *随意调整* / grid-gap：10px;宽度：200像素； animation：change 2s无限交替线性；}。item-left {grid-area：l;背景：浅蓝色；}。item-right {背景：番茄； padding-bottom：60％;} @关键帧更改{为{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>  

I'm trying to create layout like this:

• Orange blocks on the right side all have the same aspect ratio and thus height.
• Blue block has different aspect ratio.
• Height of blue block and summ of orange blocks should be equal, as shown on the image.

Is there a way to create such layout via CSS grid? I know that I can wrap orange items in a separate column element, but I'd like to avoid this. I also managed to create this layout when aspect ratio of each item is square, but no luck with this one...

Example on 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>

解决方案

You can define template areas and control the ratio using 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>

The code can be simplified like this:

.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>

这篇关于等高不同宽高比的CSS网格框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！