Grid properties issue

Html: <div class="branding" <img src="image" class="img-1"> <img src="image" class="img-2"> <img src="image" class="img-3"> <img src="image" class="img-4"> <img src="image" class="img-5"> </div> css: .branding { display:grid; grid-tempelate-columns: repeat (3 , 1fr) result : shown in attach image i want to fill the last image the span properties are not working for me please anyone help me out?
No description
19 Replies
Jochem
Jochem14mo ago
.img-5 {
grid-column-start: 2;
grid-column-end: 4;
}
.img-5 {
grid-column-start: 2;
grid-column-end: 4;
}
that should work if it doesn't, you'll have to share more representative code, either the whole thing or a minimal reproduction in something like codepen
ἔρως
ἔρως14mo ago
your html that you've sent is invalid as well, by the way you forgot to finish the <div> tag
morteinguard
morteinguard14mo ago
if i may ask what is code pen?
ἔρως
ἔρως14mo ago
codepen or jsfiddle and other similar websites let you actually write javascript, css, html and related code, and actually share the results you're having
Jochem
Jochem14mo ago
Check out #how-to-ask-good-questions and #How To Ask Good Questions here in #front-end.
ἔρως
ἔρως14mo ago
if you just share a chunk of your code, you're not letting us check the results ourselves
morteinguard
morteinguard14mo ago
<div class="branding"> <img src="img/Branding/branding-1.jpg" class="img-1" alt="">
<img src="img/Branding/branding-2.jpg" class="img-2" alt="">
<img src="img/Branding/branding-3.jpg" class="img-3" alt="">
<img src="img/Branding/branding-4.jpg" class="img-4" alt="">
<img src="img/Branding/branding-5.jpg" class="img-5" alt="">
</div> <div class="item-text"> <p>Packaging Design<p> </div> <div class="bottom-line-2 "></div> </div> </section> css: .branding { display: grid; grid-template-columns:repeat(3 , 1fr) ; grid-gap:0.1rem; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); } .img-5 { grid-column-start: 2; grid-column-end: 4;



} i just did this works out but th image suddenly get bigger
Jochem
Jochem14mo ago
then share your code in a way where I can see it running, I'm a much worse css interpreter than firefox is
morteinguard
morteinguard14mo ago
wait i,ll send you
Jochem
Jochem14mo ago
make sure to just post it in here, I'm heading off for a while, but others can still take a look
morteinguard
morteinguard14mo ago
<section id="work-b" class="text-center py-3"></section>
<div class="branding">
<img src="img/Branding/branding-1.jpg" class="img-1" alt="">
<img src="img/Branding/branding-2.jpg" class="img-2" alt="">
<img src="img/Branding/branding-3.jpg" class="img-3" alt="">
<img src="img/Branding/branding-4.jpg" class="img-4" alt="">
<img src="img/Branding/branding-5.jpg" class="img-5" alt="">
</div>
<div class="item-text">
<p>Packaging Design<p>
</div>
<div class="bottom-line-2 "></div>
</div>
</section>
<section id="work-b" class="text-center py-3"></section>
<div class="branding">
<img src="img/Branding/branding-1.jpg" class="img-1" alt="">
<img src="img/Branding/branding-2.jpg" class="img-2" alt="">
<img src="img/Branding/branding-3.jpg" class="img-3" alt="">
<img src="img/Branding/branding-4.jpg" class="img-4" alt="">
<img src="img/Branding/branding-5.jpg" class="img-5" alt="">
</div>
<div class="item-text">
<p>Packaging Design<p>
</div>
<div class="bottom-line-2 "></div>
</div>
</section>
.branding {
display: grid;
grid-template-columns:repeat(3 , 1fr) ;
grid-gap:0.1rem;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}

.img-5 {

grid-column-start: 2;
grid-column-end: 4;
}
.branding {
display: grid;
grid-template-columns:repeat(3 , 1fr) ;
grid-gap:0.1rem;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}

.img-5 {

grid-column-start: 2;
grid-column-end: 4;
}
morteinguard
morteinguard14mo ago
that is how the image is geting bigger
No description
morteinguard
morteinguard14mo ago
.img-5 {

grid-column-start: 2;
grid-column-end: 4;
height: 50%;
object-fit: cover;

}
.img-5 {

grid-column-start: 2;
grid-column-end: 4;
height: 50%;
object-fit: cover;

}
morteinguard
morteinguard14mo ago
after doing this is the result..,how to remove the below remaining white space?
No description
Jochem
Jochem14mo ago
@morteinguard how big are your images? I can try to recreate it myself in codepen, but I need to substitute some images and if they're different sizes, it might not work the same
morteinguard
morteinguard14mo ago
1024/1024
Jochem
Jochem14mo ago
hm, I'm not sure, actually
Mannix
Mannix14mo ago
you could limit the size of the rows with grid-template-rows and make your img tag responsive with
img{width: 100%; height: 100%; object-fit:cover;}
img{width: 100%; height: 100%; object-fit:cover;}
morteinguard
morteinguard14mo ago
okkay i'll try
Want results from more Discord servers?
Add your server