display: grid;分四行三列

`display: grid;` 是 CSS 中用于创建网格布局的一种工具，它允许你在网页上轻松地组织内容为多行多列的形式。当你设置 `display: grid;` 之后，元素会按照指定的行（row）和列（column）数量进行排列。

对于四行三列的布局，你可以这样做：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 列数，每列等宽 */
  grid-template-rows: repeat(4, 1fr); /* 行数，每行等高 */
  gap: 10px; /* 可选，添加元素之间的间距 */
}

/* 如果需要给每个单元格单独命名或设置样式，可以使用 grid-template-areas */
.container > div {
  place-self: auto / span(1) span(1); /* 每个元素占一格 */
}

在这个例子中，`.container` 的孩子元素会被分布到一个四行三列的网格中。每个 `.div` 都默认占据一列一行，如果需要跨越行列，可以调整 `place-self` 属性。