CSS tree structure 1-4-3

Question

Currently I am trying to make a v-for loop of list items and then want to create a tree structure of this list item. But not sure how I can fix the basic vertical 1-4-3 column like this.

<ul class="three">
  <li class="unordered-list">A</li>
  <li class="unordered-list">B</li>
  <li class="unordered-list">C</li>
  <li class="unordered-list">D</li>
  <li class="unordered-list">B-1</li>
  <li class="unordered-list">B-2</li>
  <li class="unordered-list">B-3</li>
</ul>

Answer 1

It's a bit complex with flexbox, especially if you're trying to build a dynamic loop.

If you're looking for a CSS only solution, it may be more feasible with CSS Grid.

Here's a concept to consider, featuring the grid-template-areas property:

.three {
  display: grid;
  grid-template-rows: repeat(7, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  
  grid-template-areas:
  
     ".  C  ."
     ".  .  B-1"     
     "A  B  B-2"     
     ".  .  B-3"
     ".  D  ."
     ".  E  .";
}

.A   { grid-area: A; }
.B   { grid-area: B; }
.C   { grid-area: C; }
.D   { grid-area: D; }
.E   { grid-area: E; }
.B-1 { grid-area: B-1; }
.B-2 { grid-area: B-2; }
.B-3 { grid-area: B-3; }

.unordered-list {
  background-color: lightgreen;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

<ul class="three">
  <li class="unordered-list A">A</li>
  <li class="unordered-list B">B</li>
  <li class="unordered-list C">C</li>
  <li class="unordered-list D">D</li>
  <li class="unordered-list E">E</li>  
  <li class="unordered-list B-1">B-1</li>
  <li class="unordered-list B-2">B-2</li>
  <li class="unordered-list B-3">B-3</li>
</ul>