How do I imitate having two list of items, while having only one list in css?

user_986419 0
Viewed 44

Basically I have an <ul> with some <li> inside, from which I'm trying to create 2 separate blocks:

<ul>
    <li class="group1">List 1</li>
    <li class="group1">List 1</li>
    <li class="group2">List 2</li>
    <li class="group2">List 2</li>
    <li class="group1">List 1</li>
    <li class="group2">List 2</li>
    <li class="group1">List 1</li>
    <li class="group1">List 1</li>
    <li class="group2">List 2</li>
    <li class="group2">List 2</li>
    <li class="group2">List 2</li>
    <li class="group1">List 1</li>
</ul>

What I would like to achieve here, is to basically have 2 blocks side by side separated based on the groupN classname

Note: I do not want to use any javascript for this

flexbox css-grid css html
1 Answers

CSS-Grid can do that

ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
}

.group1 {
  grid-column: 1;
}

.group2 {
  grid-column: 2;
}
<ul>
  <li class="group1">List 1</li>
  <li class="group1">List 1</li>
  <li class="group2">List 2</li>
  <li class="group2">List 2</li>
  <li class="group1">List 1</li>
  <li class="group2">List 2</li>
  <li class="group1">List 1</li>
  <li class="group1">List 1</li>
  <li class="group2">List 2</li>
  <li class="group2">List 2</li>
  <li class="group2">List 2</li>
  <li class="group1">List 1</li>
</ul>

Note: grid-template-columns: repeat(2, 1fr); is not strictly necessary as the grid will have implicit columns based on where you tell each class to be.

user_28020400
Related