Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use CSS multi-column layout when a single sequence of list items should flow from one column into the next. Use a semantic table when each item has related attributes to compare, and a column view when people need to navigate a hierarchy. These patterns may look similar, but they organize information differently.
Choose the column pattern that matches your information
| Pattern | Best for | How people read or navigate it |
|---|---|---|
| Flowing list | A one-dimensional sequence, such as a list of links or names | Items continue from one column into the next |
| Data table | Items with multiple related attributes, such as a name, category, and status | Readers compare values across rows and columns |
| Hierarchical column view | Deeply nested content that people browse by level | Each column represents a level; users move back and forth through the hierarchy |
Make a flowing list with CSS columns
CSS multi-column layout divides content into column boxes. The browser can flow list items across those columns, making this suitable when the list remains one sequence rather than a set of records with separate fields. MDN explains the layout and its properties in Using multi-column layouts and Basic concepts of multi-column layouts.
<ul class="link-list">
<li>Account settings</li>
<li>Privacy</li>
<li>Notifications</li>
<li>Help center</li>
</ul>.link-list {
columns: 16rem;
column-gap: 2rem;
}
.link-list li {
break-inside: avoid;
margin-block: 0 0.5rem;
}The columns shorthand sets a preferred column width or count. Here, 16rem is a preferred width, not a promise that every screen will show a particular number of columns. The browser fits columns according to the available space. Use column-count when you need to specify a count, column-width when a preferred width is more useful, and column-gap to control the space between columns. A column-rule can draw a divider, but it is decorative and should not be needed to convey grouping.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Multicol layout fragments content into columns. Depending on the container and content, items may flow vertically down one column before continuing in the next. Avoid imposing a fixed height simply to force a particular arrangement: container height and resulting line lengths can make content harder to follow, especially for people with visual or cognitive disabilities. MDN discusses these considerations in its multi-column layout guidance.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Make columns responsive without losing reading order
There is no universal ideal column count or screen-width breakpoint for every list. Let the available space and the length of each item guide the design. Check that columns do not become cramped, that text remains readable, and that the sequence is still clear on narrow screens.
WCAG 2.1 Reflow guidance describes ordinary vertically scrolling content at a width equivalent to 320 CSS pixels, while recognizing exceptions for content whose meaning or use requires two-dimensional layout. This is a criterion for reflow, not a rule that every design must use a particular CSS technique. See W3C’s Reflow explanation. W3C technique C32 demonstrates adapting columns using media queries and grid; it is an example technique, not a mandatory implementation: Using media queries and grid layout to reflow columns.
Keep the source markup in a meaningful order and preserve the list hierarchy as the layout changes. A visual arrangement should not make someone jump unpredictably between items when reading or navigating the page.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchUse a table for related attributes, not to split a list
If each row represents a record and each column names an attribute, use a semantic HTML table with descriptive headers. For example, a directory with a person’s name, role, and office has information that belongs together across each row. Header cells help explain what each value means. Apple’s guidance recommends descriptive headings for multicolumn tables; its platform-specific recommendations also address features such as sorting and resizable columns for macOS table views, which are not universal web requirements. See Apple’s Lists and tables guidance.
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
Do not turn a simple one-dimensional list into a table just to display it in multiple columns. That changes the information structure without adding meaningful attributes. Google’s style guidance likewise cautions against using a table to lay out a long list: Google developer documentation style guide: Lists.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use a column view to browse a hierarchy
A column view is a navigation pattern, not a flowing list. Each column shows one level of a hierarchy, and selecting an item can reveal the next level alongside it. This can work well for deep structures people need to explore back and forth when sorting a list or table is not the goal. Apple describes this pattern in its Lists and tables guidance. Choose it because users need to navigate relationships between levels, not simply because the screen has room for columns.
Quick Recap
Best Value
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.
