Как помощью grid сделать таблицу из двух колонок сжимающеюся в одну?

Question

[MarEeeeee]

Мой вариант, в целом - работает. Но переход в одну колонку переходит слишком рано из-за значения внутри minmax(), если же его уменьшить, то на большом разрешении я получаю большее количество столбцов, чем нужно

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

Answer 1

[profesor08]

Тут надо определиться, что тебе надо конкретно. Если тебе на разных размерах окна браузера нужны конкретное количество колонок, то гриды тебе тут не помогут, используй @media запросы и выставляй нужное число колонок grid-template-columns: 1fr 1fr 1fr. Если тебе не важно сколько будет колонок, а важно чтоб сами колонки не были меньше заданного размера, то вот тут тебе и надо использовать repeat(auto-fit, minmax(500px, 1fr))

Answer 2

[wakenbyWork]

Используйте media запросы тогда. Чтобы по дефолту было две колонки, а после определенного разрешения оставлять одну колонку:

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

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