у создать сетку с адаптивными квадратами.

Я чувствую, что должен быть в состоянии сделать это с помощью CSS Grid layout, но у меня возникли проблемы с установкой высоты каждого квадрата, равной ширине.

Также возникают проблемы при установке желоба между квадратами.

Будет ли мне лучше использовать flexbox?

В настоящее время мой HTML выглядит так, но будет динамичным, поэтому можно добавить больше квадратов. И, конечно, он должен быть отзывчивым, поэтому в идеале будет использовать медиа-запрос, чтобы свернуть его в один столбец.

<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

Используя сетку CSS, это насколько я получил

.square-container{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    .square {

    }
}

Я смог продвинуться немного дальше с flexbox и использовать пробел для выравнивания квадратов с красивым желобом, но все еще пытался получить высоту, соответствующую ширине каждого квадрата.

Я не смог найти ни одного примера того, как это делается с помощью flexbox или grid, но любые примеры также были бы оценены.

Спасибо