CODEWITHSUNDEEP
htmlcss
supernova
supernova

Reputation: 127

Is it possible to make an image end on the last grid column?

I am trying to do make a text and image overlay with a 3x3 grid, and I have it how I want it, but the image starts on the column line 2 and I want it to end on the column line 4 and have the extra space on the other side.

Here is what I have

Here is what I want

.banner-img {
    grid-column: 2 / 4;
    grid-row: 1 / 4;
}
.banner-text {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    z-index: 1;
}

Upvotes: 1

Views: 135

Answers (1)

supernova
supernova

Reputation: 127

So after some research, I figured it out. All I had to do is use the justify-self property on the .banner-img and set it to end. For anyone needing some help on aligning grid items how you want them, this link is very helpful!

Upvotes: 1

Related Questions