CSS 网格和媒体查询

Question

我目前正在努力获得一个 CSS 网格来处理一些针对较小屏幕尺寸的媒体查询。我基本上有一个包含两行和 3 列的网格，在较小的屏幕尺寸下下降到 3 行和两列。我希望它在 phone 大小的屏幕上下降到一个有 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

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

参见result。

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

Answer 2

将 justify-items 更改为 justify-content 因为 justify-content 将填充设置为 space，有助于将子项目居中对齐。

你可以在这里找到不同之处

@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;
}

我在您的代码笔上进行了测试，结果如下：

CSS 网格和媒体查询

CSS Grid and Media Queries

html

css

media-queries