Зигзагообразный порядок с использованием `grid-template-columns: repeat (auto-fit, minmax (10em, 1fr));`

Question

Я хочу расположить серию родственников HTML в зигзагообразном порядке, используя сетку CSS.Каждый брат и сестра должны быть одинакового размера, а сетка должна использовать автоматическое расположение, например 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
• Автоматический макет должен создавать максимально одинаковые по ширине столбцы.