Creating a dynamic grid layout using a single unordered list (<ul>), with the help of CSS styling and possibly some JavaScript magic

Question

Creating a dynamic grid layout using a single unordered list (<ul>), with the help of CSS styling and possibly some JavaScript magic

Here is an example of my extensive HTML code, filled with links:

<-- language: lang-html -->

<ul>
    <li><a href="/link.html">Link1</a></li>
    <li><a href="/link.html">Link2</a></li>
    <li><a href="/link.html">Link3</a></li>
    <li><a href="/link.html">Link4</a></li>
    <li><a href="/link.html">Link5</a></li>
    <li><a href="/link.html">Link6</a></li>
    <li><a href="/link.html">Link7</a></li>
    <li><a href="/link.html">Link8</a></li>
    <li><a href="/link.html">Link9</a></li>
    <li><a href="/link.html">Link10</a></li>
</ul>

This structure consists of one <ul> with multiple <li> elements.

I want to display this content on the page in 5 columns, like so:

Link1  Link3  Link5  Link7  Link9
Link2  Link4  Link6  Link8  Link10

You can find a similar explanation at this URL: . However, it results in a different layout where the links are positioned horizontally instead of vertically, as shown below:

Link1  Link2  Link3  Link4  Link5
Link6  Link7  Link8  Link9  Link10

Since I am not using any JavaScript framework on my site, I am seeking a solution that only involves CSS and possibly minimal framework-independent JavaScript. Any ideas for achieving this layout?

javascript css html-lists multiple-columns

Answer 1

Answer №1

The CSS Property for Creating Multiple Columns

To achieve the desired effect, you can utilize the column-count: <number>:

The column-count CSS property specifies the number of columns for the element.

<number> represents a positive integer that defines the ideal number of columns in which the content should be displayed. Setting the column-width to a specific value indicates the maximum allowed number of columns.

You have the flexibility to customize how the columns are displayed by adjusting properties like: column-width, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns (refer to the linked MDN article above)

Example

ul {
  -webkit-column-count: 5;
  column-count: 5;
}

<ul>
  <li><a href="/link.html">Link1</a>
  </li>
  <li><a href="/link.html">Link2</a>
  </li>
  <li><a href="/link.html">Link3</a>
  </li>
  <li><a href="/link.html">Link4</a>
  </li>
  <li><a href="/link.html">Link5</a>
  </li>
  <li><a href="/link.html">Link6</a>
  </li>
  <li><a href="/link.html">Link7</a>
  </li>
  <li><a href="/link.html">Link8</a>
  </li>
  <li><a href="/link.html">Link9</a>
  </li>
  <li><a href="/link.html">Link10</a>
  </li>
</ul>

Answer 2

The CSS Property for Creating Multiple Columns

To achieve the desired effect, you can utilize the column-count: <number>:

The column-count CSS property specifies the number of columns for the element.

<number> represents a positive integer that defines the ideal number of columns in which the content should be displayed. Setting the column-width to a specific value indicates the maximum allowed number of columns.

You have the flexibility to customize how the columns are displayed by adjusting properties like: column-width, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns (refer to the linked MDN article above)

Example

ul {
  -webkit-column-count: 5;
  column-count: 5;
}

<ul>
  <li><a href="/link.html">Link1</a>
  </li>
  <li><a href="/link.html">Link2</a>
  </li>
  <li><a href="/link.html">Link3</a>
  </li>
  <li><a href="/link.html">Link4</a>
  </li>
  <li><a href="/link.html">Link5</a>
  </li>
  <li><a href="/link.html">Link6</a>
  </li>
  <li><a href="/link.html">Link7</a>
  </li>
  <li><a href="/link.html">Link8</a>
  </li>
  <li><a href="/link.html">Link9</a>
  </li>
  <li><a href="/link.html">Link10</a>
  </li>
</ul>

Answer 3

Answer №2

Have you considered utilizing flex-wrap for this layout?

ul{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

li{
    width: 20%;
}

Answer 4

Have you considered utilizing flex-wrap for this layout?

ul{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

li{
    width: 20%;
}

Creating a dynamic grid layout using a single unordered list (<ul>), with the help of CSS styling and possibly some JavaScript magic

Answer №1

The CSS Property for Creating Multiple Columns

Example

Answer №2

Similar questions

User interface for creating a platform resembling Product Hunt or Reddit

Which specific html container or element can be found on the mymsn pages?

Connecting the mat-progress bar to a specific project ID in a mat-table

Oops! An error occurred while trying to load the myApp module. The module 'ui.bootstrap' is missing and causing the failure

Is there a specific CSS selector that targets elements with "multiline" content?

Modifying the header on an HTML page

Is there a substitute for the /deep selector in CSS shadow dom?

What could be causing the embedded dropdown to automatically select the initial option every time?

Error: Trying to access the 'title' property of an undefined variable in Vue.js

Could you explain the distinction between these two arrow functions?

Tips for resolving the issue of the '$interval is not a function' error in AngularJS

Methods for verifying the device on which a web application is currently operating

Modification of navigator back function in Vue routing does not work for URLs, but functions correctly for views

Having trouble deciphering this snippet of Express JS source code

javascript: separate string into parts and substitute values

Center the search box in responsive mode

Having trouble displaying toasts on my website using Angular Material design and $mdToast

Leveraging three.js through a content delivery network with the option of incorporating either S

The method of stamping masonry is not encircling

What is the best way to change an http call in a controller to a Service/factory pattern that accepts a parameter?