Question 222596 in Html Question posted in
Some basic documentation can be found here.

How to arrange images using HTML and CSS with containers?

I’m having issues arranging my images with containers. My images are a bit too spread out and I would like them to be a bit closer to one another. I decided to dynamically scale down my images and put them into containers thanks to a suggestion made in an earlier post but now I’m not sure how to set the images to the positioning I want.

I’ve tried messing with the width and directions but I still can’t get the format I want. Here is my code. Any other suggestions such as formatting or development would be greatly appreciated as I’m still very new to learning HTML and CSS.

.item-list {       /*parent container styles*/        
    width: 100%;
    display: flex;          /* allows flex properties */
    flex-direction: row;     /* keeps elements in a row */
    flex-wrap: wrap;        /* wraps elements when they reach the edge of the screen */
}

.img-container {        /*img container styles*/        
    max-width: 33.33%;
    width: 33.33%;
    display: grid;
    display: flex;
    align-items: center;
    justify-content: center;
 }      
img {            /* img styles */
    width: 100%;        
}
<div class="item-list">
    <div class="img-container">
        <a href="http://127.0.0.1:5500/keychain.html" class="href">
            <img id="keychain1" src="Images/8.webp" alt="keychain1" title="keychain1">
            <section>
                <p>Chainsaw Man Acrylic Keychain</p>
                <hr>
                <p>$10.00</p>
            </section>
        </a>  
    </div>
    
    <div class="img-container">
        <a href="http://127.0.0.1:5500/keychain2.html" class="href"> 
            <img id="keychain2" src="Images/7.webp" alt="keychain2" title="keychain2">
            <section>
                <p>Animal Acrylic Keychain</p>
                <hr>
                <p>$10.00</p>
            </section>
        </a>
    </div>
    
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/stickers.html" class="href">
            <img id="stickers" src="Images/9.webp" alt="stickers" title="stickers">
            <section>
                <p>Stickers</p>
                <hr>
                <p>$2.00-$6.00</p>
            </section>
        </a>
    </div>
    
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/photocard1.html" class="href">
            <img id="Photocard1" src="Images/10.webp" alt="photocard1" title="photocard1">
            <section>
                <p>Photocard Print (Ver 1 Designs)</p>
                <hr>
                <p>$3.75</p>
            </section>       
        </a>
    </div>
    
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/photocard2.html" class="href">
            <img id="Photocard2" src="Images/11.webp" alt="photocard2" title="photocard2">
            <section>
                <p>Photocard Print (Ver 3 Designs)</p>
                <hr>
                <p>$3.75-$12</p>
            </section> 
        </a>
    </div>
</div>
Tags:

2

Answers


  1. 0

    I don’t have commenting permissions yet, but like the first comment says from Sally, it would be nice to have some more information on what you have vs. what you want.

    If you’re just looking to get the images closer together, you can adjust the width of .img-container a.

    .img-container a {
    width: 80%;
  }
    Login or Signup to reply.
  2. 0

    I added some margins to your image containers and added the dummy images to show you how it looks. You can copy these codes and then use your own images to see the result.

    .item-list{       /*parent container styles*/            
    width: 100%;
    display: flex;          /* allows flex properties */
    flex-direction: row;     /* keeps elements in a row */
    flex-wrap: wrap;        /* wraps elements when they reach the edge of the screen */
    justify-content: center;
}

.img-container {        /*img container styles*/            
    max-width: 33.33%;
    width: 25%;
    margin: 1%;
    display: grid;
    display: flex;
    align-items: center;
    justify-content: center;
}

img {           /* img styles */
    width: 100%               
}
    <div class="item-list">
    <div class="img-container">
        <a href="http://127.0.0.1:5500/keychain.html" class="href">
            <img id="keychain1" src="https://picsum.photos/900/900?random=1" alt="keychain1" title="keychain1">
            <section>
                <p>Chainsaw Man Acrylic Keychain</p>
                <hr>
                <p>$10.00</p>

            </section>
        </a>  
    </div>
    <div class="img-container">
        <a href="http://127.0.0.1:5500/keychain2.html" class="href"> 
            <img id="keychain2" src="https://picsum.photos/900/900?random=2" alt="keychain2" title="keychain2">
            <section>
                <p>Animal Acrylic Keychain</p>
                <hr>
                <p>$10.00</p>
            </section>
        </a>
    </div>
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/stickers.html" class="href">
            <img id="stickers" src="https://picsum.photos/900/900?random=3" alt="stickers" title="stickers">
            <section>
                <p>Stickers</p>
                <hr>
                <p>$2.00-$6.00</p>                 
            </section>
        </a>
    </div>
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/photocard1.html" class="href">
            <img id="Photocard1" src="https://picsum.photos/900/900?random=4" alt="photocard1" title="photocard1">
            <section>
                <p>Photocard Print (Ver 1 Designs)</p>
                <hr>
                <p>$3.75</p>
            </section>       
        </a>
    </div>
    <div class ="img-container">
        <a href="http://127.0.0.1:5500/photocard2.html" class="href">
            <img id="Photocard2" src="https://picsum.photos/900/900?random=5" alt="photocard2" title="photocard2">
            <section>
                <p>Photocard Print (Ver 3 Designs)</p>
                <hr>
                <p>$3.75-$12</p>
            </section> 
        </a>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search