CSS Grid - 网格行跨度移动元素

Question

在这个示例中，import sys print('You have three drinks to choose from this Vending Machine: \n 1. Water \n 2. Cola \n 3. Gatorade') water = 1.00 cola = 1.50 gatorade = 2.00 choice = 0 while not choice: try: choice = int(input('Please select any one of the three choices of drinks (1,2 or 3) from the list above')) if choice not in (1,2,3): raise ValueError except ValueError: choice = 0 print("That is not a valid choice ! Try again") if choice == 1: print("1. water = $1.00") elif choice == 2: print("2. cola = $1.50") elif choice == 3: print("3. gatorade = $2.00") qrt = int(input("How many quarters did you insert ?")) dm = int(input("How many dimes did you insert ?")) nk = int(input("How many nickels did you insert ?")) pn = int(input("How many pennies did you insert ?")) total = qrt/4 + dm/10 + nk/20 + pn/100 被插入错误的位置（e正在移动它，因为它有空间而不是让它跨越它应该位于的地方下面的行）。

grid-row: span 4和f保持在正确的位置（g）但行不是＆＃34;＆＃34;跨越＆＃34;下面的行......

有没有办法让它们（grid-row: span 5 - e - f）跨越这个特定情况下的行以及g来插入在其他地方，而不是它应该在哪里？

在代码段下方，您将看到我希望通过此网格实现的目标。

＆＃13;

＆＃13;

e

＆＃13;

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "a a a a a a a a a a"
    ". . . . . . . . . ."
    "b b b b b b b b b b"
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". . . c c c c c c c"
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". . . . . . . . . ."
    ". d d d e e f f g g"
    "h h h h . . . . . ."
    "h h h h . . . . . ."
    "h h h h . . . . . ."
    "h h h h . . . . . .";
  border: 2px solid red;
}

.container > div {
  border: 2px solid lime;
  height: 25px;
}

.a {
  grid-area: a;
  grid-row: span 2;
}

.b {
  grid-area: b;
  grid-row: span 3;
}

.c {
  grid-area: c;
  grid-row: span 4;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
  grid-row: span 4;
  grid-column: span 2;
}

.f {
  grid-area: f;
  grid-row: span 5;
  grid-column: span 2;
}

.g {
  grid-area: g;
  grid-row: span 5;
  grid-column: span 2;
}

.h {
  grid-area: h;
}

＆＃13;

＆＃13;

＆＃13;

这是我想要实现的目标：

Answer 1

对于25px行的高度，您只需为网格容器添加grid-auto-rows: 25px。

要实现所需的布局，您只需更改grid-tempate-areas属性值并删除所有grid-row和grid-column定义即可。

＆＃13;

＆＃13;

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-areas:
    "a a a a a a a a a a"
    "b b b b b b b b b b"
    ". . . c c c c c c c"
    ". d d d e e f f g g"
    "h h h h e e f f g g";
  border: 2px solid red;
  grid-auto-rows: 25px;
}

.container > div {
  border: 2px solid lime;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

＆＃13;

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
  <div class="h">h</div>
</div>

＆＃13;

＆＃13;

＆＃13;