Как сделать порядок блоков сверху вниз > и слева напрвао?

Для того чтобы задать порядок блоков сверху вниз и слева направо, можно использовать свойство flexbox в стилях CSS.

1. Создайте контейнер, в котором будут размещаться ваши блоки. Назовем его "container".

.container {
  display: flex; /* Устанавливаем flexbox для контейнера */
  flex-direction: column; /* Задаем направление блоков сверху вниз */
  flex-wrap: wrap; /* Позволяет блокам переноситься на новую строку */
}

2. Отдельные блоки с содержимым называем "block". Можете назвать их, как вам удобно. Задайте им необходимые стили.

.block {
  width: 200px; /* Задает ширину блока */
  height: 200px; /* Задает высоту блока */
  margin: 10px; /* Задает отступ между блоками */
  background-color: #ccc; /* Устанавливает фоновый цвет */
}

3. Расположите блоки слева направо с помощью свойства justify-content: flex-start.

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start; /* Располагает блоки слева направо */
}

4. При необходимости разместите блоки на центральной позиции, используя свойство align-items: center.

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center; /* Располагает блоки по центру */
}

Теперь ваш контейнер с блоками будет отображаться сверху вниз и слева направо. Вы можете изменять размеры и добавлять/удалять блоки по своему усмотрению, а flexbox будет автоматически управлять их позиционированием.