Как сделать нестандартную раскладку без доп оберток?

Question

Answer 1

Как сделать нестандартную раскладку без доп оберток?

Есть вариант вывода в несколько колонок. В примере их две.

ul {
    column-count: 2;
}
ul > li:first-child {
    margin-top: 70px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

Answer 2

Никто не знает как это правильно сделать, но вот ещё вариант))

ul {
  column-count: 2;
}
li {
  
}
.devider {
  opacity: 0;
}

<ul>
  <li class="devider"></li>
  <li class="devider"></li>
  <li class="devider"></li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

БЛОГ НА HUSL

Как сделать нестандартную раскладку без доп оберток?

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