csscss-grid

How do you make two columns of equal height, different widths, that are responsive?

I'd like to have a feed in which each row has two columns of equal height:

Feed container: width is 100%

Column1 = an image of fixed width, say 300px wide

Column2 = some text, as wide as whatever is left over from Column1

Kind of like this: enter image description here

Again, these columns would be equal height, as high as the image, and all images will have a standard height, say 100px high.

But then I want to make the feed responsive, so that on small screens, the columns are stacked. The image would be 100% width and the text that goes with it would be underneath the image and also 100% width.

I have managed to get something decent looking on a large PC screen, but I haven't been able to get it to be responsive. Should I even be dealing with CSS grid? Would flex be better? Or something else? How should I go about this? I'm having some trouble figuring out how to manipulate css grid.

.story {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 6fr;
     grid-auto-rows: 1fr;
    padding: 10px 20px 0 20px;
    /*grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    grid-gap: 0rem;*/
    
    z-index: 5;
}

.story-img {
    /*object-fit: cover;*/
    border: 1px solid green;
}

.story-img img {
    height: 100%;
    width: auto;
}

.story-squib {
    /*padding: 10px 20px;*/
    background-color: #eae9e1;
    overflow: hidden;
    border: 1px solid black;
    
}

.story-head {
    font-family: 'Montserrat';
    color: #4a5831;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 2rem;
    margin: 20px;
    
}

.story-body, .story-date {
    font-family: 'Montserrat';
    color: #96968a;
    font-weight: 600;
    font-size: 1rem;
    margin: 20px;
}

.story-date {
    margin-bottom: 10px;
}
<a href="https://www.post-gazette.com/sports/jason-mackey/2025/04/07/nfl-free-agency-aaron-rodgers-pat-mcafee-show/stories/202504060108">
        <div class="col">
            <div class="story">
                <div class="col story-img"><img src="//newsinteractive.post-gazette.com/.test2/img/oakmont1.jpg" class=""></div>
                <div class="col story-squib">
                    <div class="story-head">Headline</div>
                    <div class="story-date">April 20, 2025</div>
                    
                </div>
            </div>
        </div></a>
        
        <a href="https://www.post-gazette.com/sports/paul-zeise/2025/04/07/nil-house-ncaa-settlement-pitt/stories/202504030112">
        <div class="col">
            <div class="story">
                <div class="col story-img"><img src="//newsinteractive.post-gazette.com/.test2/img/khamil-bailey-1200x929.jpg" class=""></div>
                <div class="col story-squib">
                    <div class="story-head">Headline</div>
                    <div class="story-date">April 18, 2025</div>
                
                </div>
            </div>
        </div></a>
    
    <a href="https://www.post-gazette.com/sports/jason-mackey/2025/04/07/nfl-free-agency-aaron-rodgers-pat-mcafee-show/stories/202504060108">
        <div class="col">
            <div class="story">
                <div class="col story-img"><img src="//newsinteractive.post-gazette.com/.test2/img/pittsburgh-skyline.jpg" class=""></div>
                <div class="col story-squib">
                    <div class="story-head">Headline </div>
                    <div class="story-date">April 20, 2025</div>
                
                </div>
            </div>
        </div></a>
        
        <a href="https://www.post-gazette.com/sports/paul-zeise/2025/04/07/nil-house-ncaa-settlement-pitt/stories/202504030112">
        <div class="col">
            <div class="story">
                <div class="col story-img"><img src="//newsinteractive.post-gazette.com/.test2/img/pga.jpg" class=""></div>
                <div class="col story-squib">
                    <div class="story-head">Headline</div>
                    <div class="story-date">April 18, 2025</div>
                
                </div>
            </div>
        </div></a>

Solution

  • If you want to use flex, consider adding the CSS property flex-wrap:wrap to your flexbox; this will cause the elements to stack when the width is smaller.

    Alternatively, use the slightly clunkier @media screen and (max-width: <response width>px) { <new CSS properties when stacked> }.