How to make a CSS GRID, with uneven column widths, responsive?

Question

I have created a CSS GRID and each row has 2 columns. The first column takes up 25% of the width and the second column takes up 75%. I have achieved this using

    .grid-container{
             display:inline-grid;
             grid-template-columns: 1fr 3fr;
    }

Now, I want to make it responsive such that when the screen size reduces beyond a certain point, the column should be on top of one another and each column should occupy 100% of the width container.

Every solution I've come across online does make it responsive, BUT it also changes my initial column width from 25%:75% to 50%:50% and I want to avoid that. Any suggestions or tips would be greatly appreciated. Thank you all in advance!

Answer 1

You can use media queries for that:

.grid-container {
  display:inline-grid;
  grid-template-columns: 1fr 3fr;
}

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