网格布局中最右侧的奇怪间隙

Question

这是照片

The picture of the problem

我这里有这个 CSS 代码

        .container{
            display: grid;
            grid-template-columns: 20% 45% 20%;
            grid-column-gap: 5%;
            border: 1px solid black;
        }
        .left{
            border: 2px solid red;
            height: 300px;
        }
        .middle{
            border: 2px solid blue;
            height: 300px;
        }
        .right{
            border: 2px solid green;
            height: 300px;
        }

正如您在照片最右侧看到的那样，那里有一些奇怪的缝隙。我想要它，这样那里就不会像最左边那样有空隙。如何消除间隙？

我也应该在这里问这个，因为我是新手 CSS。

我应该如何更好地编写代码。

如何也 select 多个类这样我就不必在 3 类处重复高度。

Answer 1

下面的代码将帮助您解决问题。

.container {
  display: grid;
  grid-template-columns: 20% 50% 20%;
  grid-column-gap: 5%;
  border: 1px solid black;
}
.col {
  height: 300px;
}
.col:nth-child(1) {
  border: 2px solid red;
}
.col:nth-child(2) {
  border: 2px solid blue;
}
.col:nth-child(3) {
  border: 2px solid green;
}

<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Answer 2

对 .container 使用 space-between，对项目使用通用 item class：

.container {
  display: grid;
  grid-template-columns: 20% 45% 20%;
  justify-content: space-between;
  grid-column-gap: 5%;
  border: 1px solid black;
}
.item{
  height: 300px;
}
.left {
  border: 2px solid red;
}

.middle {
  border: 2px solid blue;
}

.right {
  border: 2px solid green;
}

<div class="container">
<div class="left item"></div>
<div class="middle item"></div>
<div class="right item"></div>
</div>

网格布局中最右侧的奇怪间隙

Weird gap in the rightmost side in grid layout

css

css-grid