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
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments