How to Display Unordered List in Two Columns?


In HTML, unordered lists are collections of items that do not have to be in any particular order. To list these items, we frequently use simple bullet points and that is why they are often known as bulleted lists. An unordered list begins with the <ul> tag and closes with a </ul> tag. The list items begin with the <li> tag and end with </li> tag.

The <ul>tag, which stands for unordered list, is the li tag's parent. This means that the <li>tag is the <ul>tag's child. Following is the syntax

<ul>List of Items</ul>

There can be 4 types of bulleted lists; disc, circle, square and none. This can be specified by the type attribute inside the <ul> tag or the CSS list-style-type property. The default appearance of an unordered list is as shown below.

Example

<!DOCTYPE html>
<html>
<head>
<title>An example of a simple unordered list</title>
</head>
<body>
<p>Vegetables</p>
<ul>
    <li>Capsicum</li>
    <li>Brinjal</li>
    <li>Onion</li>
    <li>Tomato</li>
</ul>
</body>
</html>

As we can see the list items appear in a single column by default. However, we can change this setting and display the list in two or more columns by using CSS styling properties.

Using the ‘column-width’ and ‘column-count’ Property

The ‘column-width’ property defines the ideal column width, specified by a or the keyword auto. The actual width may be wider or narrower to accommodate the available space. This property is adaptable. Consider column-width to be a minimum width recommendation for the browser. When the browser cannot fit at least two columns at the width you specify, the columns will stop and collapse into a single column.

To create a versatile multi-column layout, we can use both column-count and column-width. The column-count specifies the maximum number of columns, whereas the column-width specifies the minimum width of each column. By combining these properties, the multi-column layout will automatically collapse to a single column at narrow browser widths, eliminating the need for media queries or other rules.

The ‘column-count’ Property

The ‘column-count’ property specifies the optimal number of columns into which the element's content should be flowed, expressed as an <integer> or with the keyword auto. If neither this value nor the column width is auto, it simply indicates the maximum number of columns that can be used. In contrast to column-width property, this property retains the number of columns regardless of browser width.

Example

In the example below, we will create an ordered list with two columns by specifying the number of columns using the ‘column-count’ property of CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>How to Display Unordered List in Two Columns?</title>
    <style>
      ul {
        column-count: 2;
        column-gap:20px;
      }
      div{
          background-color:seashell;
          color:palevioletred;
          border:2px solid mistyrose;
          border-radius:10px;
          height:180px;
          width:520px;
          padding:5px;
          margin:10px;
      }
      li{
          padding:2px;
      }
    </style>
  </head>
  <body>
    <h4>Top Engineering Colleges in Hyderabad</h4>
    <div>
    <ul type="square">
        <li>IIT Hyderabad</li>
        <li>IIT Hyderabad</li>
        <li>Jawaharlal Nehru Institute of Technology</li>
        <li>Osmania University</li>
        <li>Chaitanya Bharati Institute of Technology</li>
        <li>VNR/ VJIET Hyderabad</li>
        <li>Vasavi College of Engineering</li>
        <li>Sreenidhi Institute of Technology</li>
        <li>Gokaraju Rangaraju Institute of Technology</li>
        <li>G. Nayarayanamma Institute of Technology</li>
    </ul>
    </div>
  </body>
</html>

Using the ‘columns’ Property

The columns CSS shorthand property specifies the number of columns to use when drawing an element's contents, as well as the widths of those columns. This property is a shorthand for the CSS properties column-count and column width. It accepts column-count, column-width, or both properties.

columns: auto|column-width column-count;

‘Auto’ sets the column-width and column-count values to their browser default values.

Example

In the example below, we will create an ordered list with two columns by specifying the number of columns using the ‘columns’ property of CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>How to Display Unordered List in Two Columns?</title>
    <style>
      ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
      }
      div{
          background-color:papayawhip;
          color:saddlebrown;
          border-radius:20px;
          height:180px;
          padding:5px;
          width:550px;
      }
      li{
          padding:2px;
      }
    </style>
  </head>
  <body>
    <h4>Top Engineering Colleges in Hyderabad</h4>
    <div>
    <ul type="circle">
        <li>IIT Hyderabad</li>
        <li>IIT Hyderabad</li>
        <li>Jawaharlal Nehru Institute of Technology</li>
        <li>Osmania University</li>
        <li>Chaitanya Bharati Institute of Technology</li>
        <li>VNR/ VJIET Hyderabad</li>
        <li>Vasavi College of Engineering</li>
        <li>Sreenidhi Institute of Technology</li>
        <li>Gokaraju Rangaraju Institute of Technology</li>
        <li>G. Nayarayanamma Institute of Technology</li>
    </ul>
    </div>
  </body>
</html>

Updated on: 11-Sep-2023

724 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements