小贴士：在 CSS 注释中使用 ASCII 绘制网格，以便快速参考

假设您这样声明了一个网格

body {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content auto min-content;
}

当然，这取决于内容，但它可能像这样呈现

+---+-------------+
|   |             |
|   |             |
+-----------------+
|   |             |
|   |             |
|   |             |
|   |             |
|   |             |
|   |             |
+-----------------+
|   |             |
+---+-------------+

使用 ASCIIFlow Infinity 可以很容易地快速绘制出来。

现在您想将元素放置到该网格中，并且可以说最简单的方法是指定它们应该开始/结束的网格行/列。

/* grid-area: row-start / column-start / row-end / column end */

.logo {
  grid-area: 1 / 1 / 2 / 2;
}

.site-header {
  grid-area: 1 / 2 / 2 / 3;
}

.sidebar-nav {
  grid-area: 2 / 1 / 3 / 2;
}

.main-content {
  grid-area: 2 / 2 / 3 / 3;
}

.site-footer {
  grid-area: 3 / 1 / 4 / 3;
}

还有其他方法可以做到这一点。您可以使用详细的 CSS 属性。您可以命名区域。但假设您喜欢这种方法，因为它很简洁或其他原因。这就是 ASCII 有用之处！将其留在 CSS 注释中并对行进行编号。

/*
  1   2             3
1 +---+-------------+
  |   |             |
  |   |             |
2 +-----------------+
  |   |             |
  |   |             |
  |   |             |
  |   |             |
  |   |             |
  |   |             |
3 +-----------------+
  |   |             |
4 +---+-------------+
*/

现在您有了可以从中挑选出这些网格编号的可视化参考。

如果您喜欢原生应用程序并想变得更花哨，可以使用 Monodraw。