Я пытаюсь сделать несколько рядов квадратов (3 на линию), которые имеют одинаковую высоту.

Я написал несколько HTML и CSS для этого, но все блоки идут на одной строке.

Вот что у меня так далеко:

#list-wrapper {
  display: flex;
  width: 100%;
}
#list-wrapper div {
  width: 33.33%;
}
#list-wrapper div img {
  flex: 1;
}

<div id="list-wrapper">
  <div>
    <img src="images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
  <div>
    <img src="images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
  <div>
    <img src="images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
</div>

Когда я загружаю страницу с этим, появляются все поля, но все они находятся на одной строке, проходя 100% ширины родительского элемента div.

Буду признателен за любую оказанную помощь.