Отзывчивые именованные grid-template-columns?

Question

Как работает именование grid-template-columns в отношении медийных запросов и отзывчивости?

Я пытаюсь изучить это и начал с очень простой сетки из 2 столбцов, от планшета и выше 50 /50 сетка, однако, планшет ниже, я хочу, чтобы это было друг на друге.

Я использую единицу fr, так что 1fr для каждой стороны, когда я хочу это 50/50, но как это сказать, что игнорировать это наmobile?

auto не работает и не работает 100%.

Это то, что я имею до сих пор.Настройка сетки:

.f-2-grid {
  grid-template-columns: [left-side] auto [right-side] auto;
}

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: [left-side] 1fr [right-side] 1fr;
  }
}

Ориентация на 2 столбца:

.footer-contact.f-2-grid-box {
  grid-column: left-side;
}

.follow-icons.f-2-grid-box {
  grid-column: right-side;
}

Я уверен, что это простая идея и извинения за простой вопрос, но не могу найти правильный путь извсе учебники, которые я прочитал.

Answer 1

Спасибо, это поставило меня на правильный путь ... это добилось цели ...

.f-2-grid {
  /*nothing needed here*/
}

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: [left-side] 1fr [right-side] 1fr;
  }
}

@media (min-width: 46.25em) {
  .footer-contact.f-2-grid-box {
    grid-column: left-side;
  }
}


@media (min-width: 46.25em) {
  .follow-icons.f-2-grid-box {
    grid-column: right-side;
  }
}

Answer 2

Если вы хотите, чтобы на мобильном устройстве был только один столбец, определите только один:

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: 100%;
  }
}

И вам, вероятно, следует удалить явное свойство grid-column, поскольку оно будет только 1 столбцом.

Я не уверен, что ты об этом спрашивал.