使用`grid-template-columns：之字形顺序：repeat（auto-fit，minmax（10em，1fr））;`

Question

我想使用CSS网格以Z字形顺序排列一系列HTML兄弟姐妹。每个兄弟姐妹都应具有相同的大小，并且网格应使用自动布局，例如grid-template-columns: repeat( auto-fit, minmax(250px, 1fr))。

我尝试过这种自动布局：

#div1 {  
  display:grid;   
  grid-gap:10px; 
  margin:30px;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
}
#div1 > DIV {
  padding: 30px;
  color: white;
  background: blue;
}

<div id="div1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div> 
  <div>11</div>
  <div>12</div>
</div>

我想实现绿色布局，但获得红色布局。

请注意，红色布局中的单元格大小不同，并且不会自动换行以创建新的行集。

所需布局的ASCII艺术，可自动适应视口的宽度，例如：

 1  4
 2  5
 3  6
 7 10
 8 11
 9 12
etc

 1  4  7
 2  5  8
 3  6  9
10 13 16
11 14 17
12 15 18

 1  4  7 10
 2  5  8 11
 3  6  9 12
13 16
14 17
15 18

 1  4  7 10 13
 2  5  8 11 14
 3  6  9 12 15
16
17
18

约束：

• 我无法更改HTML
• 自动布局应创建尽可能多的相等宽度的列。