<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Gird - justify-self</title>
</head>

<body>
    <main>
        <section>
            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007720-d35c5f72-8d64-4ed8-8afc-f539a2a53d7e.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007721-72475fa5-bf2c-4689-85fb-42afc1ac05ae.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007729-f1549eaf-fb3b-4bbb-99c2-a9d51f7e25d0.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007728-51f5c876-537d-4fd7-aaca-cac078ff718b.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007726-7bfc1eaa-4536-480c-a017-4977b5f43fca.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007732-459ad872-1f92-45d9-aa6a-7b9010f7645b.jpg" alt="">
            </div>
        </section>
    </main>
</body>
</html>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        --teal-400: rgb(45 212 191);
        --teal-500: rgb(20 184 166);
        --teal-600: rgb(13 148 136);
        --teal-700: rgb(15 118 110);
        --teal-800: rgb(17 94 89);
        --teal-900: rgb(19 78 74);
    }
    body {
        width: 100vw;
        height: 100vh;
    }

    section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 300px;
        justify-content: center;
        align-content: center;
        gap: 10px;
    }

    div {
        border: 2px solid var(--teal-900);
        background-color: var(--teal-400);
        transition: all 1s ease-out;
    }

    div:nth-child(1){
        justify-self: end;
    }

    div:nth-child(3){
        justify-self: start;
    }

    div:nth-child(5){
        animation-name: roll;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-direction: alternate;
    }
 
    img {
        /* width: 100%; */
        width: 200px;
    }

    @keyframes roll {
        0% {
            justify-self: start;
        }

        50%{
            justify-self: center;
        }

        100% {
            justify-self: end;
        }
    }
  
@media screen and (max-width: 600px){
    section {
        grid-template-columns: repeat(2, 1fr);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.