Minimal pixels for gridbox

Question

enter image description hereI have a gridbox with 2 gridboxes, 3fr and 1,5fr. Now I would like to make a CSS that has something like "if gridbox 2 (1,5fr) is smaller than 100px, go to the next row. I don't know if this is possible.

Answer 1

I think flexbox might be easier for what you're looking to do, but if you want to use a grid you will have to use @media.

.container{
    display: grid;
    grid-template-columns: minmax(200px,3fr) minmax(100px, 1.5fr);
}

@media screen and (max-width:330px) {
    .container{
      grid-template-columns: 1fr;
    }
}

You may have to adjust the numbers depending on your particular code, but this will make the elements inside the "container" class take up 100% when below the threshold.