html - 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

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

标签： htmlcssmedia-queries

Answer 1

将justify-content: center规则设置为.projects-container。而且您不需要在媒体查询中指定此规则。

看结果。

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