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>

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

首先，我建议您阅读有关网格布局的更多信息。 link可能会为您提供帮助。让我们解决您的问题。您的案例中的每个div项目都是一个网格项目。所以你应该给他们不同的风格。首先，您应该为容器设置any_sequence和// Atomic READ-MODIFY-WRITE body() @driver.clock is only { grab(driver); do read_item keeping { .cmd == RD; .addr == addr; }; // Wait random time; do write_item keeping { .cmd == WR; .addr == addr; .data == data; }; ungrab(driver); };。之后，对于项目，应设置grid-template-columns，grid-template-rows，grid-column-start，grid-column-end。查看上面关于网格布局的link并尝试解决它，这是我的解决方案，可能会对您有所帮助。 https://jsfiddle.net/sghgh1996/0cf39bm1/

HTML：

grid-row-start

CSS：

grid-row-end

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

3 个答案: