UL List items with two manageable column without JS

Hey folks, working with List Items is a very basic thing in HTML, isn’t it? A dam yes right :). Let’s go through a very basic example structure of it below.

<ul>
    <li> Some text here </li>
    <li> Some text here </li>
    <li> Some text here </li>
    <li> Some text here </li>
</ul>

Now you might be thinking that what’s new with my topic right? So let’s just move on without wasting time.

As you all know that while working with some custom HTML pages or let say a simple HTML webpage, Requires dealing with more than a couple of List Items structure with our HTML page right. And it all with a different design as well.

So here I will be showing some of the List Items solutions for Column Structure (Split/Divide) with just simple CSS, which is commonly used while working with web pages.

1. List Items into more than a column using Column Count.

column-count:2;
-webkit-columns: 2;
-moz-columns: 2;
column-gap:10px;

Find the example with below heading from this link https://codepen.io/kishan002/pen/RwKdeyL

Split/Divide List Items in Column Structure 1 — Using Column Count

column-count This specifies the number of columns u want to divide the inner li. Let say you want 2 number columns, then u need to write column-count:2; for column-count:3; likewise.

column-gap This is Optional, It is only for giving space between 2 columns of LI.

While using this column count it’s hard to manage the column data, Like if you have a UL with let say 10 LI, and you want 2 columns.

Then what simply column-count does, it will just divide the number of data, which is Li here with the number of column-count which is 2 as for now. So it will be like 10/2=5 you will be left with 2 columns and 5 LI with each column.

But what if you want something like 2 columns with 10 LI, and the first column should have 5 LI. Then it will be not possible with this column-count CSS property. So, therefore, its solution is in the below point :)

2. List Items into more than a column using Grid.

Grid is not often used regularly while working with most of the design of the webpages or say Webdesign. Though using CSS Grid we can do some awesome CSS design tweaks, which saves building custom javascript code and time in our Site/Webpage for design.

If you want something like 2 columns with 10 LI, and the first column should have 5 LI. Then have a look at the below Grid CSS solution

display: grid;
grid-template-rows: repeat(5, min-content);
grid-auto-flow: column;

Here the main key property is grid-template-rows: repeat(5, min-content).

grid-template-rows: repeat(5, min-content);

Find the example with Grid from below heading from this link https://codepen.io/kishan002/pen/RwKdeyL

Split/Divide List Items in Column Structure 2 — Using Grid

If you found this article helpful then, please try to appreciate it with a kind gesture of “CLAP” to this article, sharing is caring.