Is there a better way to break a list into columns?

Question

I try to break my list into 4 columns, using bootstrap i use grid and it feels illegal to do it in that way, is there a better way

This is what i did:

<div class="grid">
    <ul class="list-group">
        <div class="row">
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                <li class="list-group-item">3</li>
            </div>

            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2f</li>
                <li class="list-group-item">3</li>
            </div>
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                </div>
            <div class="col">                
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
            </div>
        </div>
    </ul>
</div>

I want it to break without adding any div tags is there a way?

Answer 1

You can use the CSS columns property for this:

ul {
  columns: 4;
}

ul {
  columns: 4;
}

<div class="grid">
  <ul class="list-group">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2f</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>             
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
  </ul>
</div>

Note that you can't have divs between list items, too.

EDIT: I've just noticed you wanted two items in each of the last two columns, so columns may not be what you want. But rather than using divs, if you know the number of list items you'll have, you could place the list items into a grid by targeting them with something like nth-child.