为什么在 grid-template-columns 中显示 100% 的网格会脱离主体？

Question

.parent {
  position:fixed;
  width:100%;
  left:0;
  top:14px;
  display:grid;
  grid-template-columns:40% 60%;
  grid-gap:5px;
  background:#eee;
}
.left {
  border:2px solid red;
}
.right {
  border:2px solid red;
}

<div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>

如果位置不是，fixed则没有问题，但如果位置是fixed-parent则右侧不完全可见。

Answer 1

问题并不像您想象的那样与width:100%有关。这是grid-template你制作的40% 60%，你还有一个grid-gap，5px其中的总数将超过100%。

fr相反，考虑到间隙，依靠 单位来分割可用空间：

.parent {
  position:fixed;
  width:100%;
  left:0;
  top:14px;
  display:grid;
  grid-template-columns:4fr 6fr;
  grid-gap:5px;
  background:#eee;
}
.left {
  border:2px solid red;
}
.right {
  border:2px solid red;
}

<div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>