为什么在网格模板列中具有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>

Answer 2

水平总共8px边框，包括5px的间隙，使此问题。

.parent{
position:fixed;
width:100%;
left:0; top:14px;
display:grid;
grid-template-columns:40% 60%;

background:#eee;
}

.left{
border:2px solid red;
}

.right{
border:2px solid red;
margin-left:5px;
}

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