CODEWITHSUNDEEP
csscss-grid
RONALDO JR. ARNIBAL
RONALDO JR. ARNIBAL

Reputation: 35

Weird gap in the rightmost side in grid layout

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.

Upvotes: 2

Views: 938

Answers (2)

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

Use space-between for .container and a common item class for items:

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

Upvotes: 1

Nikesh Kp
Nikesh Kp

Reputation: 384

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>

Upvotes: 2

Related Questions