Why my images not displayed well under grid?-CodePudding

I want to display my images into clean grid but my images are not displayed very well under my codes, i want them to have the gap between my row and column but they're not really seem to be, also my images seem a little bit broken out of my grid tho i use object-fit: cover. Under here is my codes and it'd be kind of you to help me to write better codes to display a better grid for display my images!Thank you so much!

This is how it looks like: enter image description here

This is my html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(5, 200px);
            row-gap: 10px;
            column-gap: 10px;
        }
        
        img {
            width: 250px;
            height: 250px;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div >
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div >
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>

    </div>

</body>

</html>

CodePudding user response：

your images are 250x250px, your grid is width is 200px so there is overlap

try changing: "grid-template-columns: repeat(5, 200px);" to: "grid-template-columns: repeat(5, 250px);"

you can also replace : "row-gap: 10px; column-gap: 10px; "

with just: gap:10px;

CodePudding user response：

instead of using pixels for height and weight in img part use 100% or use display flex.