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

tag and closes with a

The

tag, which stands for unordered list, is the li tag's parent. This means that the
• tag is the
  tag's child. Following is the syntax
  List of Items

  There can be 4 types of bulleted lists; disc, circle, square and none. This can be specified by the type attribute inside the

  tag or the CSS list-style-type property. The default appearance of an unordered list is as shown below.

  Example

  
  
      
  
  
      
  Vegetables
      

  • Capsicum
  • Brinjal
  • Onion
  • Tomato

  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 CSS 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 CSS column-count property specifies the optimal number of columns into which the element's content should be flowed, expressed as an 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.

  
    
      
      
    
    
      
  Top Engineering Colleges in Hyderabad
      
  
      
  
          
  IIT Hyderabad
          
  IIT Hyderabad
          
  Jawaharlal Nehru Institute of Technology
          
  Osmania University
          
  Chaitanya Bharati Institute of Technology
          
  VNR/ VJIET Hyderabad
          
  Vasavi College of Engineering
          
  Sreenidhi Institute of Technology
          
  Gokaraju Rangaraju Institute of Technology
          
  G. Nayarayanamma Institute of Technology
      
      
    
  
  

  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.

  
    
      
      
    
    
      
  Top Engineering Colleges in Hyderabad
      
  
          
  
              
  IIT Hyderabad
              
  IIT Hyderabad
              
  Jawaharlal Nehru Institute of Technology
              
  Osmania University
              
  Chaitanya Bharati Institute of Technology
              
  VNR/ VJIET Hyderabad
              
  Vasavi College of Engineering
              
  Sreenidhi Institute of Technology
              
  Gokaraju Rangaraju Institute of Technology
              
  G. Nayarayanamma Institute of Technology