Как лучше всего реализовать подобную сетку где элементы построены без структурно?

Для создания сетки в HTML без использования структурных элементов (таких как таблицы или списки), можно воспользоваться различными CSS-свойствами и техниками. Вот несколько подходов, которые помогут вам достичь желаемого результата:

1. Использование свойства "display: grid":
CSS-свойство "display: grid" позволяет создавать сетку элементов без необходимости в вводе дополнительной разметки. Оно предоставляет мощные инструменты для контроля над расположением и размерами элементов в сетке. Например, вы можете указать количество столбцов и строк, а также задать размеры столбцов и строк с помощью свойств "grid-template-columns" и "grid-template-rows". Определение порядка элементов можно произвести с помощью свойства "grid-template-areas".

Пример:

<div class="grid-container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* два столбца по равной ширине */
  gap: 10px; /* промежуток между элементами */
}

.item {
  background-color: #ccc;
  padding: 20px;
}

2. Использование свойства "display: flex":
CSS-свойство "display: flex" позволяет создавать гибкие и адаптивные сетки из элементов. Оно трансформирует контейнер во флекс-контейнер, в котором элементы могут быть выровнены горизонтально или вертикально. Это позволяет создавать различные структуры с помощью свойств "flex-direction", "flex-wrap", "justify-content" и других.

Пример:

<div class="flex-container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap; /* разрешает перенос элементов на новую строку при нехватке места */
  gap: 10px; /* промежуток между элементами */
}

.item {
  flex: 0 0 calc(50% - 10px); /* два элемента в одной строке */
  background-color: #ccc;
  padding: 20px;
}

3. Использование свойства "float":
CSS-свойство "float" позволяет выравнивать элементы слева или справа внутри контейнера. Хотя это не совсем сеточная система, она может быть полезна для создания простой структуры без использования таблиц или списков.

Пример:

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
</div>

.container {
  overflow: hidden; /* фиксирует высоту контейнера */
}

.item {
  float: left;
  width: 50%; /* два элемента в одной строке */
  background-color: #ccc;
  padding: 20px;
  box-sizing: border-box; /* учитывает padding и border в ширине элемента */
}

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