Kevin Powell - Community•16mo ago

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

Jochem•16mo 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

ἔρως•16mo ago

your html that you've sent is invalid as well, by the way you forgot to finish the <div> tag

morteinguardOP•16mo ago

if i may ask what is code pen?

ἔρως•16mo 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•16mo ago

Check out #how-to-ask-good-questions and #How To Ask Good Questions here in #front-end.

ἔρως•16mo ago

if you just share a chunk of your code, you're not letting us check the results ourselves

morteinguardOP•16mo 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•16mo ago

then share your code in a way where I can see it running, I'm a much worse css interpreter than firefox is

morteinguardOP•16mo ago

wait i,ll send you

Jochem•16mo ago

make sure to just post it in here, I'm heading off for a while, but others can still take a look

morteinguardOP•16mo 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;
  }

morteinguardOP•16mo ago

that is how the image is geting bigger

morteinguardOP•16mo 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;
  
}

morteinguardOP•16mo ago

after doing this is the result..,how to remove the below remaining white space?

Jochem•16mo 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

morteinguardOP•16mo ago

1024/1024

Jochem•16mo ago

hm, I'm not sure, actually

Mannix•15mo 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;}

morteinguardOP•15mo ago

okkay i'll try

Gaming

Programming

Grid properties issue