Как разделить список ul на 2 колонки

Question

Имею список с несколькими вариантами, мне нужно чтобы он делился на 2 колонки.

 <ul>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
 </ul>

.list-unstyled {
    padding-left: 0;
    list-style: none;
    margin-top: 10px; 
    margin-bottom: 10px; 
    display: flex;
    flex-direction: column; 
    flex-wrap: wrap
}

Answer 1

.grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        // grid-auto-rows: minmax(100px, auto);
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <ul class="grid">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>

    </ul>
  </body>
</html>

Можно воспользоваться не flex а css grid

Answer 2

Воспользуйтесь column-count.

ul { column-count: 2; }

<ul>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 <li>Test</li>
 </ul>

БЛОГ НА HUSL

Как разделить список ul на 2 колонки

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