Question

这是一个很好地居中的网格，但我希望移动设备的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;

}

Answer 1

当屏幕狭窄时，您必须添加css的更改。使用：

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

然后在块中添加规则（如普通CSS），当屏幕宽度小于给定值时，规则应更改。我想这足以解决您的问题。如果您需要更多信息（例如新值），请写评论，我会尽力回答。

Examples

CSS响应网格从4列变为2

1 个答案: