How to create a checkerboard pattern between images and text

Question

I'm trying to create this checkboard pattern where the images and text alternate, but I can't get the images to align so that the corners are touching. There is some space underneath the images and I can't figure out how to get rid of it. Could someone please check my code and tell me where I went wrong? Thank you!

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}
.galleryrow{
    background: #4f5261;
    width: 100%;
    margin: 4% auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.gallerycol{
    flex-basis: 25%;
    text-align: center;
    overflow: hidden;
}
.gallerycol img{
    width: 100%;
    cursor: pointer;
    transition: 1s;
}
.gallerycol:hover img{
    transform: scale(1.1);
}

.gallerycol p{
    color: #fff
}

<div class="galleryrow">
    <div class="gallerycol">
        <img src="images/img1.jpg" alt="girl smiling">
    </div>
    <div class="gallerycol">
        <p>Let's connect! ↓
        </p>
    </div>
    <div class="gallerycol">
        <img src="images/img2.jpg" alt="girl smiling">
    </div>
    <div class="gallerycol">
        <p>Let's connect! ↓
        </p>
    </div>
    <div class="gallerycol">
        <p>Let's connect! ↓
        </p>
    </div>
    <div class="gallerycol">
        <img src="images/img3.jpg" alt="girl smiling">
    </div>
    <div class="gallerycol">
        <p>Let's connect! ↓
        </p>
    </div>
    <div class="gallerycol">
        <img src="images/img4.jpg" alt="girl smiling">
    </div>
</div>