How do I create a grid-styled layout without grid or flexbox?

Question

I want to create a grid styled layout without using grid or flexbox. I am assuming I need float for this. One of the issues is that the images aren't' filling the entire space. Any advice on how to do this?

.container {
    max-width: 90%;
    margin: 0 auto;
}

.grid-item {
    width: 25%;
    float: left;
}

.grid-item img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

<div class="container">
    <div class="grid">
        <div class="grid-item phone">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
    </div>
</div>

Answer 1

I suggest using the columns rule, specifying the number of columns and a width of 1/4 of the total width for responsiveness:

columns: 4 25vh;

Thus, the template with the image is now responsive without media queries.

.container {
    max-width: 90%;
    margin: 0 auto;
}

.grid {
    columns: 4 25vh;
}

.grid-item {
    /*width: 25%;
     float: left;*/
}

.grid-item img {
    object-fit: cover;
    width: 100%;
    height: auto;
}

<div class="container">
    <div class="grid">
        <div class="grid-item phone">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
        <div class="grid-item camera">
            <img src="https://picsum.photos/400/200" alt="" />
        </div>
        <div class="grid-item watch">
            <img src="https://picsum.photos/500/300" alt="" />
        </div>
    </div>
</div>