Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

Image grid using css

on

I need to make a 3x3 image grid using CSS. The images have been added to the page through the use of a JSON string. Currently the image grid is not displaying correctly. The images are appearing too small and the grid itself is not centered how I would I like it too. The container ID is a div and the articles are what holds the figures which hold the images and captions.

body {
    background-color: #e6f2ff;
}

nav {
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

nav a {
    font-family: Helvetica;
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-right: black 1px solid;
    color: black;
}

nav a:visited {
    color: black;
}

nav a:hover {
    color: #3385ff;
}

nav a:last-child {
    border-right: none;
}

header {
    text-align: center;
}

header h1 {
    font-family: Roboto;
    font-size: 3em;
}

section {
    margin-right: 16em;
    margin-left: 16em;
}

section h2 {
    font-family: Calibri;
}

section p {
    font-family: Arial;
    line-height: 2em;
}

section img {
    height: auto;
    max-width: 50%;
    float: right;
    border: 2px solid black;
}

section a {
    text-decoration: none;
}

#container {
    margin: auto;
    width: 50%;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    /*grid-gap: 10px;*/
    border: 2px solid black;
    font-family: Arial;
}

article {
    border: 2px solid black;
}

figure {
    border: 2px solid black;
}

<html lang="en">
    <head>
        <title>Gallery</title>
        <link rel='stylesheet' href='css/style.css' type='text/css'/>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>

    <body>
        <nav>
            <a href='index.html'>Home</a>
            <a href='hobbies.html'>Hobbies & Interests</a>
            <a href='societies.html'>Society Activities</a>         
            <a href='contact.html'>Contact</a>
            <a href='gallery.html'>Gallery</a>
        </nav>

        <main>
            <header>
                <h1>Gallery</h1>
            </header>

            <div id="container">

            </div>
        </main>
        <script src="js/script.js"></script>
    </body>
</html>

Comments

Post a Comment