如何使用CSS Grid创建2行自定义列数的目标网格布局？

你的代码问题在于未定义网格列数，仅设置行规则和自动流方向会导致列宽由内容决定，无法形成均等的网格布局。根据目标布局，提供两种适配的实现方式：

方式一：按行填充的2行2列网格（默认流方向） #

若需要元素先填满第一行两列，再填充第二行，使用以下代码：

display: grid;
grid-template-columns: 1fr 1fr; /* 定义两列，每列占容器宽度的1/2 */
grid-template-rows: 1fr 1fr;    /* 定义两行，每行占容器高度的1/2 */

方式二：按列填充的2列2行网格（匹配你使用的grid-auto-flow: column） #

若需要元素先填满第一列两行，再填充第二列，只需补充列定义即可：

display: grid;
grid-template-columns: 1fr 1fr; /* 必须定义列数，否则无法实现均等列宽 */
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;

两种方式都能生成均等的2×2网格，可根据元素填充顺序需求选择对应代码。

内容的提问来源于stack exchange，提问作者LosMos