Как лучше сверстать следующий фрагмент?

Question

Подскажите, как сверстать этот фрагмент?

Понимаю, что тут в основном списки, но их настолько много и расположены они некоторые нестандартно, и я не могу представить оптимальное решение

Буду благодарен любому подходу (что с чем объединять в div, что стоит просто списком и т.д.).

Answer 1

.container{
display:flex;
flex-direction:row;
}

<div class="container">
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
</div>

<div class="container">
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2
        <ul>
          <li>List 31</li>
          <li>List 32</li>
          <li>List 33</li>
        </ul>
      </li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
</div>

Можно через display: flex и список!

БЛОГ НА HUSL

Как лучше сверстать следующий фрагмент?

Ответы (1 шт):