Search code examples
csscss-gridgrid-layout

Post Grid Layout with Images the Same Size

I am trying to create a grid layout for posts where the images are the same dimensions no matter on the image size. I can't seem to figure it out. for example if there is a square image and a rectangle image, they will fill the same dimension.

html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .blog-container {
            width: 90%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 1rem;
            margin: 0 auto;
        }

        img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
<div class="blog-container">
        <div class="post">
            <div class="img">
                <img src="pic1.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic2.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic1.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic2.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
    </div>
This is what I am going for This is what I am trying to obtain

But this is what I have This is how mine looks

Solution

  • set the height of image container, which is the element named class 'img'.

    add this code in your CSS file

    .img {
    height: 400px;
    width: 100%;
 }