Какими инструментами разместишь несколько квадратов в колонку

Для вертикального расположения квадратов можно использовать несколько подходов:

1. Flexbox (рекомендуемый способ):

.container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* отступ между квадратами */
}

.square {
  width: 50px;
  height: 50px;
  background: #ccc;
}

2. CSS Grid:

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

3. Классический блочный поток (если не нужны отступы):

.square {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background: #ccc;
}

Flexbox - самый гибкий вариант, позволяющий легко управлять выравниванием и отступами между элементами.