What is the best way to showcase a single <ul> list in an infinite number of columns?

Utilizing Django on the backend, I aim to showcase the list below in an unlimited number of columns with overflow-x: auto.

<ul class="list">
  {% for i in skills %}
    <li>{{i}}</li>
  {% endfor %}
</ul>

Example Result:

1 7  . . . 
2 8  . . .
3 9  . . .
4 10 . . .
5 11 . . .
6 12 . . .

Answer №1

Utilizing the grid feature is a smart way to go

ol {
  display:grid;
  grid-template-rows:repeat(6,auto);
  grid-auto-flow:column;
  grid-auto-columns:100px;/* ensure a value is set here for next rule*/
  overflow:auto;
}
<ol>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>

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

Tips for effectively integrating jQuery with a database

Recently, I've been diving into the world of jQuery and came across the potential for database connections. I stumbled upon a collection of plugins that can help with this at: https://www.sitepoint.com/top-10-jquery-database-plugins/ Can someone gui ...

The AWS lambda function is experiencing difficulties with the AWS.HttpClient handleRequest operation

In my Node.Js lambda function, I am utilizing AWS HttpClient's handleRequest to search an ElasticSearch URL using the AWS SDK. I am following the guidelines provided in the AWS Documentation. Click here for more information on ES request signing. Pl ...

Different options for determining network connectivity on a website

Seeking Network and Location Information on ASP.Net Core MVC Web Application After some investigation, I came across the Navigator API online. For acquiring location data, it functions flawlessly. navigator.geolocation.getCurrentPosition(function (posi ...

What could be causing the error "Cannot read the state property of undefined" to occur in my code?

I am facing an issue with my constructor that suddenly stopped working and I can't seem to figure out why. Upon analyzing the data, it appears that at line 24, everything is being read correctly including props. However, just one line later when tryi ...

A guide to extracting iFrame information (specifically the referring URL) using JavaScript

Is there a way to retrieve the information from an iFrame (right-click on an iFrame in the browser -> This Frame -> View frame info)? I'm particularly interested in obtaining the referring URL. So far, I managed to retrieve the address using co ...

Troubleshooting: Unable to modify value with function in AngularJS

Why can't I change a value using a function in AngularJS? html: <div ng-controler='TestCtrl' id='TestCtrl'> <h1>Test: {{test.name}}</h1> <div ng-hide='showTest'> <div class=&a ...

Employ the power of AJAX to selectively display or conceal a specific group of images

Have you ever thought about showcasing a large number of images on a non-CMS website? Say you have 50 images that can't all be displayed at once. One idea is to display the first 15, then allow users to click "Next" to reveal the next batch of 15, and ...

Is there a way to control the playback of a video, such as

Currently, I am involved in a project related to IPTV. One of my objectives is to be able to capture the moment at which a video is paused so that when clicking on another button, a small iframe opens with the same video continuing from where it was origin ...

What is the best way to display my 'React Loading Spinner' component at the center of my view?

Whenever I use the Loading as my parent component for the Layout component, it always shows up in the center of the page instead of within my view. How can I adjust its positioning? ...

What is the reason behind Google Font's decision to preconnect to fonts.googleapis.com?

I've been looking to incorporate the Quicksand Font into my website, and Google suggested adding the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="h ...

Using (javascript:) within Href attributes

Recently, I've noticed some people including "javascript:" in the href attribute of an a tag. My question is: what is the purpose of this? Does it guarantee that clicking on the a tag directs the function of the click to JavaScript for handling, rathe ...

Automatically generating table through CSV file upload utilizing MySQL and PHP

My attempt to create a table by defining a table name first seems to be causing an issue in my code. I am encountering the following error message: An SQL syntax error has occurred; please refer to the MySQL server version manual for the correct syntax ...

Incorporate an ASP table within an ASP table to enhance data organization and presentation

Is it possible to create a dynamic ASP.NET table structure similar to the one demonstrated below by nesting tables inside table cells? <table> <tr> <td>[Image]</td> <td> <table> <tr> ...

The JSON array data is coming back as undefined

Currently facing an issue with the data sa var data = '[{"idcoupons_tbl":"1","discount_percent":"10"}]'; Every time I attempt to parse and retrieve a discount_percent, ie var result= jQuery.parseJSON(data); alert(result["discount_percent"]); ...

ng-repeat hide all elements except the first one

Hello there! I'm currently working on rendering a form based on an API call. Using a couple of filters, I am able to hide all elements that have 'id' in the title and which equal 0. However, I do need to display the initial element Id. I tho ...

Python script utilizing Selenium is returning an empty string when trying to extract data from

When I try to retrieve the value from a dynamically loading table by clicking on the TD element, it works fine. However, when I attempt to fetch the text from the same TD element, it returns an empty string despite trying XPATH and CSS Selector methods. H ...

Verify that the images have been successfully loaded

I'm in the process of loading 8 images that all share a common class name. For example: <img class="commonClass" src="..." alt="" /> <img class="commonClass" src="..." alt="" /> <img class="commonClass" src="..." alt="" /> How can ...

When designing a webpage using HTML and CSS, the size of HTML blocks decreases as the page is made smaller

Having an issue with the following: I hope you can help me identify my problem here and I'm not sure why it's occurring. https://i.sstatic.net/C7VzU.png I believe the problem lies in the header and nav sections I initially thought it might be rel ...

Exploring the possibilities with Rollbar and TypeScript

Struggling with Rollbar and TypeScript, their documentation is about as clear as AWS's. I'm in the process of creating a reusable package based on Rollbar, utilizing the latest TS version (currently 4.2.4). Let's delve into some code snipp ...

Retrieve data using Ajax querying from a specific data source

Currently, I am attempting to construct a custom query using Ajax to interact with PHP/MySQL. Here is what I have so far: Javascript code: var i=2; fetchFromDBPHP("name", "tblperson", "id="+i); function fetchFromDBPHP(column, table, condition) { ...