Help with styling css grid

1

image
image1899Ă—896 764 KB

I need some help with the overlap that I have at the bottom of the image grid.
I would like there to be even space like at the top.
Here is my code:
HTML:

 <div class="zone blue main-container">
    <figure class="box zone"><a href=""><img src="/img/Church.JPG" alt=""></a></figure>
    <figure class="box zone"><a href=""><img src="/img/Church1.jpg" alt=""></a></figure>
    <figure class="box zone"><a href=""><img src="/img/Church2.jpg" alt=""></a></figure>
    <figure class="box zone"><a href=""><img src="/img/Church3.jpg" alt=""></a></figure>
    <figure class="box zone"><a href=""><img src="/img/Hot-air-balloon.jpg" alt=""></a></figure>
    <figure class="box zone"><a href=""><img src="/img/Hot-air-balloon1.jpg" alt=""></a></figure>
    <figure class="box zone"><a href=""><img src="/img/Suspension-bridge.jpg" alt=""></a></figure>
    <figure class="box zone"><a href=""><img src="/img/Weston.jpg" alt=""></a></figure>
  </div>

  <footer class="zone yellow">
    <div>footer</div>
  </footer>

CSS:

 /* GRID AREA */
.main-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.box > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box {
    /* background-color: #3d8bff; */
    height: 100%;
    margin: 10px;
}

footer {
    height: 30vh;
    text-align: center;
}

footer div {
    font-size: 2.4em;
}

.zone {
    cursor: pointer;
    color:#FFF;
    font-size: 1.3em;
    border-radius: 4px;
    border: 1px solid #bbb;
    transition: all 0.3s linear;
}

MANY THANKS IN ADVANCE!

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
3

I would mess around with the footer height .

1 Like
4

You have to remove the default margin on the figure element.

1 Like