Kevin Powell - Community•3mo ago

Take full width in single column grid

I want to create grid layout where: - 1 or 2 columns - if there is enough space on screen to fit 2 items at 350+ px each, then use 2 columns and stretch items to 50% (of grid container) - if not enough, then use 1 column and stretch item to 100% - but not limit item to 350px (let it further shrink on screens below 350px wide) I attach image of how I expect it to work. Here white box is grid container, grey boxes are grid items Technically I can use media or container query to decide between minmax(350px, 1fr) on big screens and 1fr on small screens. But I thought maybe there is better solution without involving media/container queries?

/* current implementation that overflows page on small screens */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

/* current implementation that overflows page on small screens */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

2 Replies

clevermissfox•3mo ago

In your minmax , use a min() function minmax ( min(100%, 350px), 1fr )

ArctomachineOP•3mo ago

It works

Gaming

Programming

Take full width in single column grid