<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 - place-items</title>
</head>
   
<body>
    <main>
        <section>
            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794558-047ca72b-9fe0-42f7-8d8e-09c77d48d3c0.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794595-9f1358ea-5af5-4b69-8295-bde8961fed84.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794606-8b10b1c2-16e0-431d-88ca-3d6c9fca4839.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794613-9a465af6-5635-4a85-badd-42c94a2c4bda.jpg" alt="">
            </div>
        </section>
    </main>
</body>
</html>
        :root {
            --neutral-200: rgb(229 229 229);
            --amber-200: rgb(254 243 199);
            --amber-600: rgb(217 119 6);
            --amber-800: rgb(146 64 14);
        }
        body {
            width: 100vw;
        }
        section {
            display: grid;
            grid-template-columns: repeat(4, 200px);
            gap: 5px;
            place-content: center;
            height: 100vh;
        }

        div {
            width: 20em;
            height: 20em;
            position: relative;
            border: 2px dashed var(--amber-800);
            padding: 2px;
            border-radius: 100px;
        }


        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 100px;
        }

        @media screen and (max-width:1160px) {
            div {
            width: 10em;
            height: 10em;
            gap: 20px;

        }
        }


        
        @media screen and (max-width:800px) {
            section {
            grid-template-columns: repeat(2, 200px);
            }
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.