@MarEeeeee

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

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

gridTemplateColumns: 'repeat(auto-fit, minmax(500px, 1fr))',
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
profesor08
@profesor08 Куратор тега CSS
Тут надо определиться, что тебе надо конкретно. Если тебе на разных размерах окна браузера нужны конкретное количество колонок, то гриды тебе тут не помогут, используй @media запросы и выставляй нужное число колонок grid-template-columns: 1fr 1fr 1fr. Если тебе не важно сколько будет колонок, а важно чтоб сами колонки не были меньше заданного размера, то вот тут тебе и надо использовать repeat(auto-fit, minmax(500px, 1fr))
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@wakenbyWork
Используйте media запросы тогда. Чтобы по дефолту было две колонки, а после определенного разрешения оставлять одну колонку:

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

  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы