CSS网格和媒体查询[重复]

Question

我目前正在努力获得一个CSS网格来处理一些较小屏幕尺寸的媒体查询。我基本上有一个两行三列的网格，在较小的屏幕尺寸下，它可以向下延伸到三行两列。我想让它进入一个网格，在一个电话大小的屏幕上有6行和一个主列。以下是我目前的代码：

@media (max-width: 549px) {
 .projects-container {
  grid-template-columns: 200px;
  grid-template-rows: 200px 200px 200px 200px 200px 200px;
  justify-items: center;
  align-items: center;
}
.project-tile {
 justify-self: center;
 align-self: center;
}

}

这在很大程度上是可行的。然而，出于某种奇怪的原因，尽管我在上面做了一些粗制滥造的努力，但这些框并没有集中在较小的屏幕上。下面是完整的代码笔来说明我的问题：https://codepen.io/hudsontay/pen/WNGdwpw?editors=1100

具体问题在投资组合的“工作”部分。

Answer 1

更改证明-项目到证明-内容，因为证明-内容把填充空间，帮助对齐子项目的中心框。

你可以在这里找到CSS的区别——justify-*和align之间的区别-*

@media (max-width: 549px)
.projects-container {
    grid-template-columns: 200px;
    grid-template-rows: 200px 200px 200px 200px 200px 200px;
    /* justify-items: center; */
    justify-content: center;
    align-items: center;
}

我测试了你的代码，这是结果：

Answer 2

将justify content:center规则设置为。项目容器。您不需要在媒体查询中指定此规则。

看看结果。

.projects-container {
    ...
    justify-content: center;
}