Need help with some HTML/CSS [Grid]

papiswazy · 07-28-2019, 12:06 PM

Hey,
I'm currently working on a website page that allows me to my pictures off

What I want is that I have some space on top and on the bottom for maybe a future header and footer, but the most important thing right now is the center of the page, a space to show off images.
I want them to show next to each other horizontally , while being centered.

This is my code so far:

CSS:

Code:
html {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

            background-color: black;

            background-image: linear-gradient(#000000, #0F0932, #521E80);

        }

.item1 {

    grid-column-start: 2;

    grid-column-end: 3;

    grid-row-start: 2;

    grid-row-end: 3;

    place-self: center;

}

.imgbox {

    display: grid;

    grid-template-columns: 10% auto 10%;

    grid-template-rows: 15% auto 15%;

}

.img {

    max-height: 40%;

    max-width: 40%;

}

HTML:

Code:
<!DOCTYPE html>

<header>

    <title>Design</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</header>

<body>

    <div class="imgbox">

        <div class="item1">

            <img src="images/wal.png" alt="Wal Logo" class="img">

            <img src="images/gstieve.png" alt="GetoStieve Logo" class="img">

        </div>

    </div>

</body>

<footer>

</footer>

</html>