Member Avatar for andrewliu

Hello,

I was thinking what would be a best way to create another column if a list is too long?

Say I have a <ul> tag and doing a while loop output <li> tags. Would it be good to just use like a while loop and set the condition to a certain number, and when it hits a number, do another <ul> tag?

Or is there another way of doing something like this?

I'm not exactly sure how to set up the php for this. Cause what if I don't need three columns now, but would need it later? I would code now for only two columns, but later if I need to, I would have to add codes for third column. But I dont want to go that way. I want to be able to just have it so it will automatically set up for the next column without me going into the back end of it.

Thank you

  • 2 Contributors
  • 1 Reply
  • 219 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by petr.pavel

Dani AI

Generated

Three practical ways to handle a long <ul> so new columns appear automatically, with pros/cons tied to 's point about choosing a limit.

First: CSS multi-column (fast, no backend changes). Let the browser flow <li> items into columns with column-width or column-count. Works well for simple lists and responsive widths; it does not require splitting the markup and preserves UL/LI semantics for assistive tech. Caveat: columns are filled top-to-bottom, so visual ordering is column-wise and items won’t be balanced by count if individual items vary a lot in height.

Example CSS:

ul.columns {
  column-width: 220px;
  column-gap: 20px;
  -webkit-column-width: 220px;
  -moz-column-width: 220px;
}

Second: server-side chunking (exact control). As noted, a limit must be chosen one way or another. Read all items into an array and split into N chunks so each column gets a predictable number of items. This makes columns balanced by item count and lets each column be a separate UL (easier per-column styling or ordering). A simple PHP approach is to use array_chunk() with a computed chunk size based on count($items) and the desired number of columns.

Third: CSS Grid/Flexbox or client-side JS for visual balance. Use grid/flex when layout needs complex alignment across breakpoints. If list items have widely different heights and visual balance is required, a small JS balancer (or Masonry-style layout) will produce the best-looking columns but adds complexity.

Troubleshooting tips: avoid using table markup for layout of non-tabular data; test with real content heights (not placeholder text); for very long lists consider pagination or virtualization to avoid huge DOMs.

Member Avatar for petr.pavel

Hi andrewliu,
you will have to set a limit one way or another:
a) either you say "show max $x rows per column
b) or split the output into $y columns

I guess you prefer (a).

There's no (widely supported) HTML tag for columns so either you will have to use a table and TD for each column, or use floating DIVs and style them with CSS.

Either way, when ending one column and beginning another one, some HTML code must be printed: end current, UL, end TD or DIV, begin new TD or DIV, begin new UL. You could do this in the while loop but the code will look better if you choose to preprocess your data first and use foreach.

/*
 * First read your data and group it
 */
$maxRowsLimit = 123; // set your limit here
$groupedRows = array();
$rowsPerGroup = $groupId = 0;
while ($row = ....) {
  if (++$i > $maxRowsLimit) {
    $i = 0;
    $groupId++;
  }
  $groupedRows[$groupId][] = $row;
}

/*
 * Now display the groups as columns
 */
print '<table><tr>';
foreach ($groupedRow as $rows) {
  print '<td><ul>';
  foreach ($rows as $row) {
    print '<li>'.$row.'</li>';
  }
  print '</ul></td>';
}
print '</tr></table>';
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.