CSS网格-网格间隙导致容器变得太小

Question

我是CSS-Grid的新手，并不完全了解所有内容。但是，一旦我设置了一个网格间隙，容器元素就似乎很小，无法容纳所有元素。一切都按预期进行，但是如果我检查容器，我会发现它太窄了。我做错了什么？

在这里您可以看到问题所在的小提琴。 蓝色背景部分的右侧不应缺少一些像素。

article {
  display: grid;
  grid-template-columns: 50% 50%;;
  grid-template-rows: 280px auto;
  grid-gap: 6px;
  background-color: #2196F3;
  height: 424px;
  width: 560px;
}

article > div {
  background-color: #f1a76c;
}

article > div.large{ 
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

https://jsfiddle.net/juqqernaut/56tz9cv3/10/

谢谢您的帮助

Answer 1

您可以将grid-template-columns: repeat(2, 1fr)用于article元素。

已更新-https://jsfiddle.net/56tz9cv3/17/