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?
19 Replies
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
your html that you've sent is invalid as well, by the way
you forgot to finish the
<div>
tagif i may ask what is code pen?
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
Check out #how-to-ask-good-questions and #How To Ask Good Questions here in #front-end.
if you just share a chunk of your code, you're not letting us check the results ourselves
<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
<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
then share your code in a way where I can see it running, I'm a much worse css interpreter than firefox is
wait i,ll send you
make sure to just post it in here, I'm heading off for a while, but others can still take a look
that is how the image is geting bigger
after doing this is the result..,how to remove the below remaining white space?
@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
1024/1024
hm, I'm not sure, actually
you could limit the size of the rows with
grid-template-rows
and make your img tag responsive with
okkay i'll try