Weird gap in the rightmost side in grid layout

Question

This is the photo

The picture of the problem

I have this CSS code here

        .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;
        }

As you can see in the rightmost side of the photo, there's some weird gap there. I want it so that there will be no gap in there like in the leftmost side. How do I remove the gap?

I should also ask this here since I'm new at this CSS.

How should I better write my code.

How to also select multiple classes so I don't have to repeat the height at the 3 classes.

Answer 1

The below code will help you to solve your problem.

.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>