The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use CSS multi-column layout when you want one simple sequence of list items to flow from one column into the next. Use a semantic table when each item has related attributes to compare, and a hierarchical column view when people need to navigate levels of data. Those patterns may look similar, but they serve different purposes.
Choose columns for the kind of information you have
| Information structure | Suitable pattern | How people read or use it |
|---|---|---|
| One-dimensional sequence | CSS multi-column layout | Items flow through columns as continuous content. |
| Related attributes for each item | Semantic data table | Rows keep each item’s attributes together under descriptive headings. |
| Levels of a hierarchy | Hierarchical column view | People navigate between columns, with each column representing a level. |
Do not turn a long, simple list into a table just to distribute it across the screen. Google’s style guidance distinguishes lists from tabular information, while Apple recommends descriptive headings for tables: Google’s list guidance and Apple’s table guidance.
As an Amazon Associate I earn from qualifying purchases.
Make a flowing list with CSS
CSS multi-column layout fragments content into column boxes. Set a preferred column width, a column count, or both; add a gap or rule if it helps clarify the layout. MDN documents the column-count, column-width, and columns properties and their behavior in its guides to using multi-column layouts and their basic concepts.
ul {
columns: 2 14rem;
column-gap: 2rem;
}
li {
break-inside: avoid;
}Here, columns: 2 14rem supplies a preferred count and width; the browser lays out columns according to the available space. The gap separates columns. Preventing a list item from breaking inside a column can keep an individual item together, though it cannot guarantee every column will have the same number of items. Choose values based on the content and container rather than assuming a fixed count suits every screen.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Keep the layout usable as the screen narrows
Columns can make lines shorter, but they can also introduce awkward reading paths or overly tall content. MDN cautions that container height and line length can create challenges for people with visual or cognitive disabilities. Preserve the list’s meaningful order and hierarchy as the layout changes, and make sure users can still follow it without relying on a particular visual arrangement.
WCAG 2.1’s Reflow guidance describes ordinary vertically scrolling content at a width equivalent to 320 CSS pixels. It allows exceptions for content whose meaning or use requires two-dimensional layout. That width is a criterion condition, not a universal breakpoint for switching to one column. W3C’s CSS technique C32 demonstrates adapting columns with media queries and grid; it is an example technique, not a required implementation. See the WCAG Reflow guidance for the criterion’s scope.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use tables and column views for their intended jobs
Use a table for related values
If each row needs to show several connected values—for example, a product name, category, and price—use a semantic HTML table with descriptive column headers. This lets readers understand how values relate, instead of presenting unrelated-looking columns of text. Apple’s table guidance also covers sorting and resizable columns for macOS table views; those are platform-specific recommendations, not general web requirements.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use a hierarchical column view for navigation
A column view is appropriate when people move through a deep hierarchy, such as nested folders, and need to navigate back and forth between levels. In this pattern, each column represents a level rather than a portion of one flowing list. Apple describes it as a way to browse deep hierarchies when sorting a list or table is not needed: Apple’s column-view guidance.
Quick Recap
Best Value
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
