Question

我的 CSS 网格应该具有 70vw 的指定宽度。

但是当我向网格添加 column-gap 时，它变得大于 70vw。

避免这种情况的解决方案是什么？

button{
  width:100%;
}

.grid-container{
  width:70vw;
  border:1px black solid;
  display:grid;
  grid-template-columns:33.3% 33.3% 33.3%;
  justify-items:stretch;
}

.not-wanted{
  column-gap:10%;
}

Grid fits to the specified width :)
<div class="grid-container">
 <div><a href=""><button>Grid-Child 1</button></a></div>
 <div><a href=""><button>Grid-Child 2</button></a></div>
 <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

<br>
Grid doesn't fit to the specified width :(
<div class="grid-container not-wanted">
 <div><a href=""><button>Grid-Child 1</button></a></div>
 <div><a href=""><button>Grid-Child 2</button></a></div>
 <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

Answer 1

您可以使用 fractional unit，因为它作用于可用空间而不是 %，后者将 10% 添加到计算宽度。所以现在，浏览器在您的示例中将 width 计算为 43% + 43% + 43% = 129%。

button {
  width: 100%;
}

.grid-container {
  width: 70vw;
  border: 1px black solid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch;
}

.not-wanted {
  column-gap: 10%;
}

Grid fits to the specified width :)
<div class="grid-container">
  <div><a href=""><button>Grid-Child 1</button></a></div>
  <div><a href=""><button>Grid-Child 2</button></a></div>
  <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

<br> Grid fits now after using fr unit :(
<div class="grid-container not-wanted">
  <div><a href=""><button>Grid-Child 1</button></a></div>
  <div><a href=""><button>Grid-Child 2</button></a></div>
  <div><a href=""><button>Grid-Child 3</button></a></div>
</div>

CSS 网格溢出指定宽度

1 个答案: