网格项在较小的屏幕尺寸上崩溃

Question

我在StatusCode=403 StatusDescription=This request is not authorized to perform this operation using this permission. configs = {"dfs.adls.oauth2.access.token.provider.type": "ClientCredential", "dfs.adls.oauth2.client.id": "78jkj56-2ght-2345-3453-b497jhgj7587", "dfs.adls.oauth2.credential": dbutils.secrets.get(scope = "DBRScope", key = "AKVsecret"), "dfs.adls.oauth2.refresh.url": "https://login.microsoftonline.com/bdef8a20-aaac-4f80-b3a0- d9a32f99fd33/oauth2/token"} dbutils.fs.mount(source = "adl://<accountname>.azuredatalakestore.net/tempfile",mount_point = "/mnt/tempfile",extra_configs = configs) %fs ls mnt/tempfile 容器中有一组子代-每个子代都有编号。在600px的断点处，子级display: grid完全失去了镇静感，并放缩到其内部内容大小。为什么4跳到4以下呢？

3

.box {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: bold;
}

.box.md {
  grid-column: span 2;
}

.box.lg {
  grid-column: span 2;
  grid-row: span 2;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  grid-gap: 8px;
}

@media (max-width: 920px) {
  max-width: 800px;
}

@media (max-width: 600px) {
  grid-auto-rows: 120px;
}

https://jsfiddle.net/amw273vq/

Answer 1

  

为什么4跳到3以下呢？

因为项目1和2都应用了grid-column: span 2。意味着已经有两列可用，并且项目4没有理由移至下一行。

使所有列占据一整行。

将此添加到您的代码中：

@media (max-width: 600px) {
  .container > div {
    grid-column: span 1 !important; (you need to override the span 2 rules higher up)
  }
}

revised demo

---

第4项崩溃的原因与您的媒体查询无关。

如果仔细观察，您会发现第4项在屏幕宽度为640px时折叠。这是在达到600px媒体查询之前。

问题出在这里

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))

在640像素的屏幕宽度下，项目3达到280像素，这是最小宽度。

结果，项目4被推到第二列，该列由grid-column: span 2在其同级物上创建。

但是，在此屏幕尺寸下，只有一个显式（即已定义）列的空间。第二列必须在隐式（即未定义）网格中生成。

而且，由于grid-auto-columns的默认值（用于设置隐式列大小的属性）为auto，因此第二列采用最宽单元格的宽度。