Learning journal solo project

[solemn edge]

Hello everyone,

I'm searching a nice way to center my grid in 2 rows with the same size of each blog. I think I almost done that for the desktop view but it seems like each blog is streching to fill the gap

Would it be possible to help on this one to make sure I understand well grid ?

I'm sharing my html/css code for the desktop part. thanks in advance !

@media screen and (min-width: 650px) {
    header {
        padding: 0 3em;
    }

    .container {
        display: grid;
        grid-template-columns: repeat(3, minmax(309px, 979px));
    }

    .hero {
        height: 30.5rem;
        padding: 3em;

        & .hero-date {
            font-size: 1rem;
        }

        & .hero-title {
            font-size: 2.5rem;
        }

        & .hero-description {
            width: 38.375rem;
        }
    }

    .blog {
        padding: 2em;
    }

    .hidden {
        display: inline-block;
    }

    .read-more {
        display: none;
    }

}

[grave walrus]

hi @solemn edge ,

not sure if i'm understanding your problem correctly, but i think the issue could be that your grid is overflowing its container unless the screen size gets wide enough.

what i mean by this is that your media query is for a min-width of 650px, but the minimum width of your grid is 927px (309 x 3) + gap values

so you'll want to adjust your minmax calculations so that the grid can fit inside its container at the minimum size

if that's doesn't address your problem, feel free to ask for more help (sharing a scrim would make it easier to see what's going on)