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.

htmlcssfrontend

Answer №1

ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 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 №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 №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

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

Canvas - Occasionally, using lineTo() can result in crisp edges in the drawing

I've created a simple Canvas drawing app. However, I've noticed that occasionally the lineTo() command generates a line with fewer coordinates, resulting in many edges: I'm currently using the latest version of Firefox - could this issue be ...

javascripthtmlcanvas

What is the best way to incorporate CSS styles into a PHP loop?

Struggling to implement CSS styles on a PHP loop: <h3 class='title'></h3> The CSS style doesn't seem to be taking effect: .title{ color : red; } I attempted surrounding the echo with <?php ?> tags and then applying ...

phphtmlcss

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

csslaravelvue.jstailwind-css

I am unable to determine the origin or background of my sidebar

I am having an issue with styling a sidebar using HTML and CSS. The problem I am facing is with setting the background-color property. Despite my efforts to customize the style, the background remains transparent and shows the color of the page beneath it. ...

cssbootstrap-4backgroundsidebar

Implementing the Audio() Element with JavaScript

I've written the code below, but it's not working properly! When I click on the play button, nothing happens HTML: <button id="play"><img id="playicon" src="img/Polygon 1.svg"></button> JS: I have a variable named 'song0 ...

javascripthtmlwebaudio

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

PHP and MySQL form is not being updated with new data

In my database, the fields include: id,name,email_id,address,phone_no,username,password,category,date <?php include_once('connect_to_mysql.php'); if(isset($_POST["submit"])){ $a=mysql_real_escape_string($_POST["name"]); ...

javascriptphpmysqlhtml

CSS - Height not working properly on mobile device model iPhone 6

I've been working on a seemingly simple problem for some time now without success! The issue involves a <header> element with a height of 100px. When the screen size reaches a certain breakpoint (specifically targeting mobile devices), I need ...

ioscsssassmedia-queries

The CSS :active selector glutton

Within a <div> element, I have an <img>. I would like the entire div to scale down by 10% (using transform) when clicked on. While I have achieved this effect, there is one minor issue: clicking on the image itself does not trigger the scaling, ...

htmlcssinternet-explorercss-selectors

Retain the dashes in their original positions while extracting numbers following each dash from an array using Regex

Someone from a different discussion helped me figure out how to extract the numbers from an array. However, I am now struggling to capture the numbers after the "-" dash. Let me illustrate what I have and put you in the same scenario. Here is the array co ...

phphtmlarraysregexnumbers

What steps should I take to create a slider using my image gallery?

I have a unique photo gallery setup that I'm struggling with: As I keep adding photos, the cards in my gallery get smaller and smaller! What I really want is to show only 4 photos at a time and hide the rest, creating a sliding effect. I attempted ad ...

javascripthtmlcss

Continue to alter elements by stacking them on top of each other

Currently, I am in the process of familiarizing myself with CSS3 3D transforms. However, I am encountering difficulties in keeping elements that are undergoing transformation on top of other elements. If you'd like to take a look at what I have accom ...

jqueryjquery-uicssz-indextransform

Adjust the jQuery resizable handlers on the fly

I am encountering an issue when attempting to change the handler on a resizable element. Initially, I used : $(line) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "e, w" }); N ...

javascriptjquerycsshandlerresizable

Updating image on click in CSS and HTML

How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click After Click This is my code: <ActiveLink activeClassName=" ...

htmlcssnext.js

Guide to Embedding Dynamic Images in HTML Using VUE

I am venturing into the world of VUE for the first time, and I find myself in need of a header component that can display an image based on a string variable. Despite my best efforts to search for tutorials, I have not been able to find a solution. Header ...

javascripthtmlcssvue.js

Angular: Variable `app` has not been defined

I am working on a simple MEAN stack app and it is almost up and running, but I encountered an uncaught reference error when it tries to redirect to the index page. The server seems to be running fine and the browser displays "Loading..." as expected on the ...

javascripthtmlangularmean-stackmean

Run a Javascript function two seconds after initiating

My goal is to implement a delay in JavaScript using either setInterval or setTimeout, but I am facing an issue where the primary element is getting removed. Code that works fine without Javascript delay: const selectAllWithAttributeAdStatus = document. ...

javascripthtmljquerycssajax

Struggling to align a div in the middle using react and tailwindcss

Struggling to center a div in React with Tailwind, no matter what method I try. Here is my code: "use client"; import Image from "next/image"; import React from "react"; const LoginPage = () => { return ( <div cla ...

cssreactjsnext.jstailwind-css

Can anyone help me get my carousel to work properly?

I am facing a carousel problem in my personal exercise project. I have gathered HTML, CSS, and JavaScript from the internet and am attempting to integrate them all together. //Sidebar script start $(document).ready(function () { var trigger = $(&apo ...

javascripthtmljquerycsscodeigniter-3

What is the easiest way to include a copyright symbol in a React component?

I am trying to include the copyright symbol in a React component, but it doesn't seem to be working for me. function Footer() { return ( <footer> <p>&copy</p> </footer> ); } <p>&copy</p> ...

javascripthtmlreactjs