如何控制不同尺寸网格项之间的间隙？

Question

在下面的布局中，我希望 A 和 B 并列，并且 D 强制的所有间隙都在 B 和 C 之间。 justify/align-content/self/items 似乎没有任何效果。网格间隙也没有。

虽然这些项目有固定的尺寸，但一般问题不是：这些项目可能有不同的宽度。当 D 比 A + B 窄时，它们是并列的，但是当 D 比 A + B 宽时，我不知道如何保持 A 和 B 并列。

.container {
  display: grid;
  grid-template-areas: "a b c" "d d e";
  width: min-content;
  background-color: lightyellow;
}

.a {
  grid-area: a;
  width: 120px;
}

.b {
  grid-area: b;
  width: 40px;
}

.c {
  grid-area: c;
  width: 80px;
}

.d {
  grid-area: d;
  width: 300px;
}

.e {
  grid-area: e;
  width: 100px;
}

.a,
.b,
.c,
.d,
.e {
  justify-self: start;
  border: solid 1px black;
  background-color: lightblue;
  height: 40px;
}

<h1>floating grid items</h1>
<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>

Answer 1

考虑一个模板列，您将第一个设置为自动，第二个设置为1fr。也可以考虑inline-grid而不是设置宽度为min-content

.container {
  display: inline-grid;
  grid-template-areas: 
    "a b c" 
    "d d e";
  grid-template-columns:auto 1fr auto;
  background-color: lightyellow;
  border:1px solid red;
}

.a {
  grid-area: a;
  width: 120px;
}

.b {
  grid-area: b;
  width: 40px;
}

.c {
  grid-area: c;
  width: 80px;
}

.d {
  grid-area: d;
  width: 300px;
}

.e {
  grid-area: e;
  width: 100px;
}

.a,
.b,
.c,
.d,
.e {
  justify-self: start;
  border: solid 1px black;
  background-color: lightblue;
  height: 40px;
}

<h1>floating grid items</h1>
<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>

或者你可以在宽度上考虑max-content并保留display:grid

.container {
  display: grid;
  grid-template-areas: 
    "a b c" 
    "d d e";
  grid-template-columns:auto 1fr auto;
  background-color: lightyellow;
  border:1px solid red;
  width:max-content;
}

.a {
  grid-area: a;
  width: 120px;
}

.b {
  grid-area: b;
  width: 40px;
}

.c {
  grid-area: c;
  width: 80px;
}

.d {
  grid-area: d;
  width: 300px;
}

.e {
  grid-area: e;
  width: 100px;
}

.a,
.b,
.c,
.d,
.e {
  justify-self: start;
  border: solid 1px black;
  background-color: lightblue;
  height: 40px;
}

<h1>floating grid items</h1>
<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>