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

Posted 2023-03-05

【中文标题】CSS 网格和媒体查询 [重复]

【英文标题】：CSS Grid and Media Queries [duplicate]

【发布时间】：2021-04-05 20:15:13

【问题描述】：

我目前正在努力让 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

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

【参考方案1】：

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

请参阅result。

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

【讨论】：

这是正确的答案，在我下面的答案中，我得到了一个显示其工作原理的链接。和平！

@ManhNguyen，谢谢。你的回答也不错。我给你的答案 +1。

【参考方案2】：

将justify-items 更改为justify-content，因为 justify-content 将填充设置为空格，有助于对齐框的子项中心。

你可以在这里找到区别CSS - The difference between justify-* and 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;

我在你的 codepen 上进行了测试，结果如下：