使用CSS网格实现等高但宽高比不同的盒子

Question

使用CSS网格实现等高但宽高比不同的盒子

htmlcsscss-grid

5

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

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

是否有一种通过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>

- Marvin3

3个回答

2

这是涉及IT技术的可用代码。您可以在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>

- Tejas J

0

首先，我建议您多了解一下网格布局。这个链接可能会对您有所帮助。然后让我们来解决您的问题。在您的情况下，每个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;
}

- Sadjad Ghanbarynasab

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您可以使用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>