# How to make img smaller in css grid

**URL:** <https://forum.pinegrow.com/t/how-to-make-img-smaller-in-css-grid/5748>\
**Category:** Beginners\
**Created:** [October 8, 2021, 4:29pm UTC](https://forum.pinegrow.com/t/how-to-make-img-smaller-in-css-grid/5748 "2021-10-08T16:29:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [October 8, 2021, 4:29pm UTC](https://forum.pinegrow.com/t/how-to-make-img-smaller-in-css-grid/5748/1 "2021-10-08T16:29:19Z")

</div>

How do I make just the imgs smaller, but not change the grid area size?  
`<div class="container gallery" style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));grid-gap:10px;"> <div class="pack"> <img src="imgs/Denali.jpg" style="width: 100%; object-fit: contain;/"> <h3>Denali</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div>`

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [October 8, 2021, 6:15pm UTC](https://forum.pinegrow.com/t/how-to-make-img-smaller-in-css-grid/5748/2 "2021-10-08T18:15:21Z")

</div>

Hi @kat,  
Right now you are setting the image to fit to the entire width of the grid cell using `width: 100%`. Just make the width smaller and center everything if needed with flexbox.  
Cheers,  
Bob