CODEWITHSUNDEEP
htmlcsscss-grid
Christian
Christian

Reputation: 1

CSS Grid System adding extra gap

I am trying to understand the basics of the CSS grid system. I have an image I want to place in the upper left corner. When I place it in the top left corner, for some reason it adds extra space at the top and the left. As well, when I adjust the gap in the CSS, nothing changes, unless I change it to something extremely large (like 300px).

Here is the code I have so far. I tried adjusting the gap, removing the gap, etc.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="gridgallerycss.css">
</head>

<body>

    <div class="gallery">
        <figure class="gallery__item gallery__item--1">
            <img src="Emma_Allerd_Images/emmapic1.jpg" class="gallery__img" alt="Image 1">
        </figure>
    </div>


</body>

</html>

CSS

.gallery{
    display: grid;;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    gap: 15px;
}

.gallery__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__item--1{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 6;
}

Upvotes: 0

Views: 132

Answers (1)

Gavish Juggernauth
Gavish Juggernauth

Reputation: 11

You just need to change the original margin set by the tag figure in your html. For example, add in your css:

figure{
    margin: 0px;
}

You can also remove the gap:15 px, it is not necessary.

Upvotes: 1

Related Questions