Tips for splitting an HTML list into multiple columns

Is it possible to split an HTML list into columns based on its positions using CSS and/or jQuery?

For example, if I want to create a number of columns equal to (TOTAL-ITEMS/3).

In this example, we will end up with 2 columns.

<ul id="list-1" >
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>
</ul>

This time, we'll have 3 columns.

<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
</ul>

Unfortunately, as the list is generated by a CMS, there is no option to add custom classes or IDs.

Answer №1

Definitely, adding columns is achievable by using the following code snippet:

ul {
    -webkit-column-count: 3; /* Supported in Chrome, Safari, Opera */
    -moz-column-count: 3; /* Supported in Firefox */
    column-count: 3;
}

Check out the Jsfiddle Demo to see how it works

Learn more about Column-count @ MDN here

Keep in mind that CSS does not have the ability to detect the number of li elements to determine columns automatically. You need to find an alternative method for this.


Here's a JQuery solution you can use:

Thanks to this SO Question for inspiration

$(document).ready(function() {
    var numitems = $("#myList li").length;    
    $("ul#myList").css("column-count",numitems/3);
    $("ul#myList").css("-webkit-column-count",numitems/3);
    $("ul#myList").css("-moz-column-count",numitems/3);

});

Take a look at JSfiddle Demo 2 to see it in action

Answer №2

To create three columns in your unordered list, simply include the styling column-count: 3;

Answer №3

How may I be of assistance?

$(function() {
  var numItems = $("#list-1 li").length;
  var cols = Math.ceil(numItems/4);
  $("#list-1").css({"-webkit-column-count": ''+cols, 
                    "-moz-column-count": ''+cols,
                    "column-count": ''+cols});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
  
  <li>item in fourth column</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What can be done to prevent buttons from piling up?

In the initial stages of my code, I am focusing on establishing the positioning for various elements. Although I have managed to structure most of it, the final two sections are still pending and I have encountered a problem. Utilizing bootstrap has ensur ...

Click events failing to trigger within an HTML dropdown menu

Within my Angular view, I have created an HTML dropdown like the one below: HTML <select> <option value="Func 1"> <button class="btn ui-button ui-widget ui-state-default ui-corner-all" ng-click="callFunc1( ...

Tips on handling various CSS styles for different layouts in ReactJS

Dealing with two different layouts for the Front End and Admin End has presented a challenge for me. I have been including CSS files in the render function for both layouts, but unfortunately, they conflict with each other. For the Front End layout: impo ...

Ways to position an icon in line with an element rather than the text within the

I currently have an issue where my svg icon and span element are positioned side by side. Unfortunately, when the text inside the span element overflows, the svg icon also moves down with it. This behavior is not what I want. Here's a demonstration o ...

"Initiate an Ajax call in Full Calendar before an event is displayed on the calendar

I need guidance on how to integrate ajax calls with the Full Calendar documentation. Specifically, I want to make an ajax call to a WordPress database before each event is rendered on the calendar. The response from the call will determine the color of the ...

Hide the scrollbars on the sidebar

I'm attempting to recreate a sleek scrollbar that caught my eye on the website . To achieve this, I need to have a screen larger than 955px in order to display the sidebar. However, when my sidebar overflows in the y direction, it causes an additional ...

What could be causing this highchart plot to fail to display in both IE and Chrome?

Check out the plot in this jsfiddle: http://jsfiddle.net/essennsee/y5HCm/ The plot looks good in Firefox, but only shows the legend in IE and Chrome. If I remove the following code snippet it works fine. Is there a different way to format the labels?: ...

What is the most effective method for integrating Ajax file uploading?

Is it possible to incorporate an "ajax" file upload (is this concept commonly known by this name, or does it involve using an iframe for the file upload process?) specifically for uploading images within a form? For example, let's say a user wants to ...

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

Place three images in the center of a div container

Recently, I've been working on some HTML code that utilizes the Angular Material library: <div layout="row" layout-wrap style="background: yellow; "> <div ng-repeat="pro in Products" > <md-card class="cardProduct" > ...

Tips for retrieving only the ID using the onchange event in a select dropdown in Angular 2

I am working with Angular 8 and I have a select box with an onchange function that retrieves an ID. However, when I check the console, the ID is displayed in the format 2:2 instead of just 2. Can someone please assist me with this issue? <select ...

Div with a background image that adjusts based on screen size

Currently, I am working on creating a parallax effect within a div through adjusting the background image based on scroll movements. My goal is to ensure this effect remains responsive across different screen sizes. I want the image to scale appropriately ...

jquery mouse event does not register on touch-based devices

I have a mouse move event set up to scroll a div. However, when I try to access the functionality using a tab it does not work. How can I integrate this functionality onto a touch device? $(document).ready(function(){ $('#tim').on('mous ...

Displaying PDF files on the internet without allowing them to be downloaded

How can I display PDF files on my website without allowing them to be saved or downloaded? Is there a way to prevent browsers from saving or downloading the PDF files? ...

Struggling to display bootstrap glyph icons on any browser

I am currently following a tutorial on .Net Core from Pluralsight that heavily relies on Bootstrap glyph icons. However, I'm facing an issue where none of the glyph icons are showing up in any browser on my Windows 10 system (I've tried both the ...

Django AJAX for implementing a unique Like button

I've been attempting to implement a like button using Ajax. In my strain model, I have a field called user_like = models.ManyToManyField(settings.AUTH_USER_MODEL, related_name='strains_liked', ...

Using jQuery to extract the value from a string using logical operations

One challenge I am facing involves manipulating a string stored in a jQuery variable (var str). The string looks like this: var str = 4-68,4-69,4-70,5-86,5-87,5-88,5-89,5-91,6-100,6-101 My goal is to organize the string and transform it into the followin ...

Utilize jQuery to compare JavaScript files between the cache and the application

When making changes to my JS files in the application, I find myself constantly having to clear my browser's cache to see those changes. To avoid this inconvenience, I tried using the following: <script type="text/javascript" src="js/main.js?cache ...

Use jQuery to target an element by its class name and node index

I am trying to target a specific element with the class ".myclass" by its node index, but I keep encountering an error stating that the element has no "animate" function. Here is an example: <div class="myclass"></div> <div class="myclass" ...

What is the best way to align three tables columns in a single row?

I am facing an issue with aligning the columns of three different tables in one line. I have tried applying CSS styling, but the columns still appear misaligned. How can I ensure that the columns are properly arranged in a single line? Below are my HTML/C ...