CSS адаптивная сетка перейти от 4 столбцов к 2 - PullRequest
Новая
       7

CSS адаптивная сетка перейти от 4 столбцов к 2

0 голосов
/ 16 ноября 2018

Это хорошо отцентрированная сетка, но я хочу, чтобы 4 колонки снизились до 2 для мобильных устройств.Что я должен добавить?

body {
  display: grid;
  align-items: center;
  justify-items: center;
  background: grey;
  max-width: 56em;
}

ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3em;
  margin: 0 auto;
  max-width: 64em;
}

li {
  display: grid;
  align-items: center;
  justify-content: center;
  list-style: none;

}

1 Ответ

0 голосов
/ 17 ноября 2018

Вы должны добавить изменения CSS, когда экран узкий.Использование: 

@media screen and (max-width: ???px){}

И в блоке вы добавляете правила, как в обычном CSS, которые должны изменяться, когда ширина экрана меньше заданного значения.Я полагаю, вам будет достаточно справиться с этим.Если вам нужна дополнительная информация (например, новые значения), пишите комментарии, и я постараюсь на них ответить.

Примеры

...