Question

在下面的代码段中，我有5个单元格，名称分别为a至e。 a和b应该并排，并以固定的宽度尽可能高。 c应该在它们下面，并尽可能缩小其高度，并使a和b的宽度相匹配。 d和e应该在右侧，顶部叠放d，占据所有可用宽度，而e具有固定高度，并让d占据尽可能高。

我不希望c和e的高度完全相关。因此，我将d和e放在了一个嵌套的网格（明亮地命名为de）中。我希望当我将e的高度设置为某个值时，它应该变为该高度，并且d应该根据需要缩小或增长，其他所有内容都应保持不变。但是，当我更改e的高度时，c也会更改其高度。

为什么世界上的嵌套网格会影响其父级，以及如何防止它发生？

以下是摘要，以防万一。a fiddle。您可以通过调整输入值来更改e的高度。

let e = document.getElementById('e')
let heightInput = document.querySelector('#controls input')
heightInput.addEventListener('input', function() {
	e.style.height = heightInput.value + 'px'
})

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#controls {
  height: 25px;
  padding: 5px;
}

#grid {
  background: orange;
  
  width: 100%;
  height: calc(100% - 35px);
  
  display: grid;
  grid-template-columns: min-content min-content auto;
  grid-template-rows: auto min-content;
  grid-template-areas:
    'a b de'
    'c c de';
}

#a {
  background: red;
  
  grid-area: a;
  width: 30px;
}

#b {
  background: blue;
  
  grid-area: b;
  width: 30px;
}

#c {
  background: green;
  
  grid-area: c;
}

#de {
  background: purple;
  
  grid-area: de;

  display: grid;
  grid-template-rows: auto min-content;
  grid-template-areas:
    'd'
    'e';
}

#d {
  background: grey;
  
  grid-area: d;
}

#e {
  background: yellow;
  
  grid-area: e;
  height: 30px;
}

<body>
  <div id="controls">
    Set height of e in px <input type="number" value="30" />
  </div>
  <div id="grid">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="de">
      <div id="d">d</div>
      <div id="e">e</div>
    </div>
  </div>
</body>

Answer 1

实际上我没有准确的解释，但这是由于min-content的计算所致。代替它，您可以结合使用1fr和auto

let e = document.getElementById('e')
let heightInput = document.querySelector('#controls input')
heightInput.addEventListener('input', function() {
	e.style.height = heightInput.value + 'px'
})

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#controls {
  height: 25px;
  padding: 5px;
}

#grid {
  background: orange;
  
  width: 100%;
  height: calc(100% - 35px);
  
  display: grid;
  grid-template-columns: min-content min-content auto;
  grid-template-rows: 1fr auto; /* updated this */
  grid-template-areas:
    'a b de'
    'c c de';
}

#a {
  background: red;
  
  grid-area: a;
  width: 30px;
}

#b {
  background: blue;
  
  grid-area: b;
  width: 30px;
}

#c {
  background: green;
  
  grid-area: c;
}

#de {
  background: purple;
  
  grid-area: de;

  display: grid;
  grid-template-rows: 1fr auto;  /* updated this too but not mandatory */
  grid-template-areas:
    'd'
    'e';
}

#d {
  background: grey;
  
  grid-area: d;
}

#e {
  background: yellow;
  
  grid-area: e;
  height: 30px;
}

<body>
  <div id="controls">
    Set height of e in px <input type="number" value="30" />
  </div>
  <div id="grid">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="de">
      <div id="d">d</div>
      <div id="e">e</div>
    </div>
  </div>
</body>

当嵌套网格更改大小时，CSS网格更改轨道大小

1 个答案: