请求编写基于grid-template的CSS代码：2行100px、3列50px

要创建2行（每行高度100px）、3列（每列宽度50px）的网格布局，以下是两种基于grid-template的单行实现方式：

1. 不使用repeat函数的写法 #

直接明确列出所有行和列的尺寸值，斜杠/之前定义行，之后定义列：

.grid-container {
  display: grid;
  grid-template: 100px 100px / 50px 50px 50px;
}

2. 使用repeat函数的写法 #

当行列尺寸重复时，用repeat()函数简化代码——第一个参数是重复次数，第二个是重复的尺寸值：

.grid-container {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(3, 50px);
}

完整可运行示例 #

你可以结合以下代码快速验证效果：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

/* 任选上面一种grid-template写法即可 */
.grid-container {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(3, 50px);
  gap: 8px; /* 可选：添加网格间距，提升视觉可读性 */
}

.grid-item {
  background: #2196F3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

补充说明 #

grid-template是grid-template-rows和grid-template-columns的简写语法，斜杠/是行与列定义的分隔符，这种写法比分开写两行代码更简洁直观。

内容的提问来源于stack exchange，提问作者Aalok Kumar Yadav