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>
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
1 Like