How to make a two-column table shrink into one using grid?

Question

css

My version generally works. But the transition to one column goes too early due to the value inside minmax (), if it is reduced, then at a large resolution I get more columns than I need

gridTemplateColumns: 'repeat(auto-fit, minmax(500px, 1fr))',

Answer 1

Here you need to decide what you need specifically. If you need a specific number of columns on different sizes of the browser window, then grids will not help you here, use @mediaqueries and set the required number of columns grid-template-columns: 1fr 1fr 1fr. If it doesn't matter to you how many columns there will be, but it is important that the columns themselves are not smaller than the specified size, then here you need to userepeat(auto-fit, minmax(500px, 1fr))

Answer 2

Use media queries then. So that by default there are two columns, and after a certain permission, leave one column:

.grid {
  grid-template-columns: 1fr 1fr;

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