Guide on how to organize a list into three columns using a single ul tag

Question

Guide on how to organize a list into three columns using a single ul tag

Is there a way to split a ul list into 3 columns using CSS?

This is how my HTML structure looks like:

 <ul>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>

     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>

     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
     <li>Test</li>
 </ul>

Issue: I need to style the list to have 3 columns without directly editing the page.

Desired Result: The end result should show the list divided into 3 columns using CSS.

Your assistance would be greatly appreciated.

html css frontend

Answer 1

Answer №1

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

Answer 2

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

Answer 3

Answer №2

Utilizing CSS3 properties like flexbox, you can achieve the following layout:

ul {
  flex-direction: column;
  flex-wrap: wrap;
  display: flex;
  height: 100vh;
}
ul li {
  flex: 1 0 25%;
}

The above CSS will generate a grid layout as shown below:

+--------------------+
|  01  |  05  |  09  |
+--------------------+
+--------------------+
|  02  |  06  |  10  |
+--------------------+
+--------------------+
|  03  |  07  |  11  |
+--------------------+
+--------------------+
|  04  |  08  |  12  |
+--------------------+

If you desire a different layout like the one demonstrated below:

+-----------------------+
|  1  |  2  |  3  |  4  |
+-----------------------+
+-----------------------+
|  5  |  6  |  7  |  8  | 
+-----------------------+
+-----------------------+
|  9  |  10 |  11 | 12  |
+-----------------------+

You can implement the following CSS styles:

ul {
  flex-wrap: wrap;
  display: flex;
}
ul li {
  flex: 1 0 25%;
}

* {box-sizing: border-box;}

body {
  margin: 0;
}

.list {
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  padding: 0;
  margin: 0;
}

.list li {
  border-bottom: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;
}

.list li:nth-child(4n + 1) {
  background: blue;
}

.list li:nth-child(4n + 2) {
  background: orange;
}

.list li:nth-child(4n + 3) {
  background: green;
}
.list li:nth-child(4n + 4) {
  background: purple;
}

<ul class="list">
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>

  <li>Test 5</li>
  <li>Test 6</li>
  <li>Test 7</li>
  <li>Test 8</li>

  <li>Test 9</li>
  <li>Test 10</li>
  <li>Test 11</li>
  <li>Test 12</li>
</ul>

Answer 4

Utilizing CSS3 properties like flexbox, you can achieve the following layout:

ul {
  flex-direction: column;
  flex-wrap: wrap;
  display: flex;
  height: 100vh;
}
ul li {
  flex: 1 0 25%;
}

The above CSS will generate a grid layout as shown below:

+--------------------+
|  01  |  05  |  09  |
+--------------------+
+--------------------+
|  02  |  06  |  10  |
+--------------------+
+--------------------+
|  03  |  07  |  11  |
+--------------------+
+--------------------+
|  04  |  08  |  12  |
+--------------------+

If you desire a different layout like the one demonstrated below:

+-----------------------+
|  1  |  2  |  3  |  4  |
+-----------------------+
+-----------------------+
|  5  |  6  |  7  |  8  | 
+-----------------------+
+-----------------------+
|  9  |  10 |  11 | 12  |
+-----------------------+

You can implement the following CSS styles:

ul {
  flex-wrap: wrap;
  display: flex;
}
ul li {
  flex: 1 0 25%;
}

* {box-sizing: border-box;}

body {
  margin: 0;
}

.list {
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  padding: 0;
  margin: 0;
}

.list li {
  border-bottom: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;
}

.list li:nth-child(4n + 1) {
  background: blue;
}

.list li:nth-child(4n + 2) {
  background: orange;
}

.list li:nth-child(4n + 3) {
  background: green;
}
.list li:nth-child(4n + 4) {
  background: purple;
}

<ul class="list">
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>

  <li>Test 5</li>
  <li>Test 6</li>
  <li>Test 7</li>
  <li>Test 8</li>

  <li>Test 9</li>
  <li>Test 10</li>
  <li>Test 11</li>
  <li>Test 12</li>
</ul>

Answer 5

Answer №3

If you're not a fan of the column-count solution (I personally like it, but it's worth noting that browser support can be unreliable, especially in IE), you can try this alternative approach:

ul li{width:33.333333%; float:left;}

Or you could also use:

ul{display:block;}
ul li{display:inline-block;}

However, with this method, you'll end up with 3 columns arranged differently than before. Instead of:

1   4   7
2   5   8
3   6   9

You'll get:

1   2   3
4   5   6
7   8   9

So weigh the pros and cons carefully.

Personally, I prefer monkeyinsight's solution, but if you're looking for another option, here's one to consider.

Answer 6

If you're not a fan of the column-count solution (I personally like it, but it's worth noting that browser support can be unreliable, especially in IE), you can try this alternative approach:

ul li{width:33.333333%; float:left;}

Or you could also use:

ul{display:block;}
ul li{display:inline-block;}

However, with this method, you'll end up with 3 columns arranged differently than before. Instead of:

1   4   7
2   5   8
3   6   9

You'll get:

1   2   3
4   5   6
7   8   9

So weigh the pros and cons carefully.

Personally, I prefer monkeyinsight's solution, but if you're looking for another option, here's one to consider.

Answer 7

Answer №4

How to Implement CSS Grid Layout

Here is a simple example of using CSS Grid:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div class="cont">
    <ul class="list">
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
    </ul>
</div>

</body>
</html>

Here is the corresponding CSS code:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Check out a live demo here

Answer 8

How to Implement CSS Grid Layout

Here is a simple example of using CSS Grid:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div class="cont">
    <ul class="list">
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
        <li class="list-item">*</li>
        <li class="list-item">*</li>
        <li class="list-item">*</li>    
    </ul>
</div>

</body>
</html>

Here is the corresponding CSS code:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Check out a live demo here

Guide on how to organize a list into three columns using a single ul tag

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for utilizing both the Element Selector and Class Selector in Jquery

Trouble with selecting a color from the picker tool

The form submits immediately after jquery is activated

What is the best way to center text on an HTML canvas?

Error in thread : TagNameUnexpectedException

Capture a snapshot of a webpage that includes an embedded iframe

Utilize CSS to display line breaks within a browser output

Load the div using ajax upon submitting the form

Adding options to an HTML select dropdown menu using data stored in an array

Utilizing jQuery to Extract HTML Data Attributes

Unable to Trigger Jquery Scroll Event

Using JSON within HTML: A guide to sanitizing stringified objects

The dimensions of a Tumblr video

Conceal HTML elements from the bottom as new content is being added dynamically

Instructions for utilizing the nav-pill with nav-justified components in Bootstrap3x without incorporating any responsive capabilities

Image background is not showing up in the input field

Strange spacing below body element discovered while browsing website in Firefox 7

What are the steps to incorporate an iframe containing uniquely designed XML content?

Converting HTML Form Data into CSV with Multiple Rows

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys