CSS-сетка | Как автоматически подогнать столбцы разного размера?

Я пытаюсь использовать сетку CSS (впервые), я борюсь с некоторыми основными проблемами.

Я создаю нижний колонтитул с тремя компонентами.

  #footer-content {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: $max-width;
    width: 100%;
    height: 100%;
    color: white;

    display: grid;
    grid-template-columns: 12% 12% 76%;
}

Для мобильных устройств:

@media only screen and (max-width: 800px) {
  #footer-content {
      grid-template-columns: 50% 50% 100%;
    }
}

Проблема с приведенным выше кодом: третий элемент (ширина 100%) не перемещается на следующую строку, а появляется за пределами экрана.

Использование grid-template-columns: repeat(auto-fit, 50% 50% 100%); не работает.

Использование grid-template-columns: repeat(auto-fit, 50%); работает: третий элемент сдвинут вниз но имеет только ширину 50% вместо 100%.

Вопрос: Как использовать сетку CSS для автоматического подбора трех столбцов разного размера?