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

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

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