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

const A = {
  B1: {
    C1: {
      D1: [
        "значение конечного D в этом примере масив но ты можешь вствыить что угодно если нужно продолжить дерево то используй обьект а не массив либо делай вложенные масивы во вложенные массивы но это не совсем удобно при обращении",
      ],
      D2: {},
      D3: {},
      D4: {},
    },
    C2: {
      D1: {},
      D2: {},
      D3: {},
      D4: {},
    },
    C3: {
      D1: {},
      D2: {},
      D3: {},
      D4: {},
    },
  },
  B2: {
    C1: {},
    C2: {},
    C3: {},
  },
};

Вы можете использовать Grid или FlexBox, почитайте об этих технологиях и примите решение что для вас предпочтительнее, от себя могу посоветовать пройти мини игру для понимания работы FlexBox flexboxfroggy.com/#ru