CSS 中应该如何分割网格？

Question

我开始学习 CSS 中的网格。我认为模仿主Windows\xc2\xa08 Metro面板将是一个很好的练习（我的参考照片：\n https://prnt.sc/orgusg）。

\n

我定义了所有面板并正确排列它们。这是一些参考代码，显示了我对模板列所做的尝试。

\n

.boxes {\n    margin: 50px 150px;\n    display: grid;\n\n    /* \n            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n            grid-template-columns: 2fr 2fr 2fr 2fr;\n            grid-template-columns: 1fr 1fr 1fr 1fr;  \n        \n        This is what I\'ve tried here \n    */\n\n    grid-auto-rows: 50%;\n    grid-gap: 10px;\n}\n

\n

对于“grid-template-columns”的第一个命令，我尝试使所有看起来宽跨度的框从其初始位置（例如，1）到它们应该看起来很宽的位置（例如，2）。

\n

.mail {\n    grid-column: 1/2;\n}\n

\n

对于“grid-template-columns”的第二个命令，我尝试拆分框。

\n

.ie {\n  grid-column: 3/4;\n}\n

\n

但它给了我奇怪的错误。\n我的问题：我无法让盒子看起来不同大小。我该怎么做？

\n

Answer 1

一种选择是按照Kareem 的回答grid-template-area中的建议使用。

但是，在这种情况下，我认为这不是一个好的解决方案，因为它要求您指定每个应用程序在网格中的位置。我实际上并不认为你想要那样。您希望能够说“这个框应该占据 N 行和 N 列”，并让浏览器为您执行此操作。这实际上很容易做到。

如果您有一个跨越两列的网格元素，您可以对行执行grid-column: span 2, 或。grid-row: span 2或者，当然，两者，或者更高的数字。

默认情况下，浏览器只会按顺序排列元素。如果网格元素无法容纳下一个空间，它将移动到新行，之后的所有内容都将位于该行上。在这种情况下，我认为您不希望这样做，所以您可以这样做grid-auto-flow: dense，这将始终将内容放入第一个可用的框中，无论它们最终的顺序如何。例如，这里：

.boxes {
  margin: 50px;
  height: max-content;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
  grid-auto-flow: dense;
}

.boxes>div {
  background: darkblue;
  color: white;
  font-weight: bold;
  padding: 5px;
}

.mail {
  grid-column: span 2;
}

.edge {
  grid-row: span 2;
}

<div class=boxes>
  <div>Word</div>
  <div class=mail>Mail</div>
  <div class=edge>Edge</div>
  <div>Excel</div>
  <div>cmd</div>
  <div class=mail>Mail</div>
  <div>Solitaire</div>
</div>

顺便说一句，您首先遇到的问题相当简单。你的代码说：

.mail{
  grid-column: 1/2;
}

之所以出现一个只使用一列的盒子是......因为这就是grid-column: 1/2 意思！这些数字不是指页面中的列，而是指分隔它们的线。例如，看看这个图：

1       2       3       4
|       |       |       |
|       |       |       |
|       |       |       |
|       |       |       |
|       |       |       |

您可能认为这1/2指的是填写前两列：事实并非如此。它指的是前两行：即第一“列”。这很令人困惑吗？也许。现在你知道了，不会的！

最后，我也将您更改grid-template-columns为repeat(auto-fill, 100px). 您不知道屏幕有多宽，那么为什么您会特别想要四列呢？这段代码表示“在提供的空间中可以容纳尽可能多的 100px 列”。