Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layoutmodule.
Perhaps because, before the web, I’d worked in print, I was over-excited at the prospect of dividing content into columns without needing extra markup purely there for presentation. I’ve used Multi-Column Layout regularly ever since. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?
Holes in the specification
For a long time, there were, and still are, plenty of holes in Multi-Column Layout. As Rachel Andrew — now a specification editor — noted in her article five years ago:
“The column boxes created when you use one of the column properties can’t be targeted. You can’t address them with JavaScript, nor can you style an individual box to give it a background colour or adjust the padding and margins. All of the column boxes will be the same size. The only thing you can do is add a rule between columns.”
She’s right. And that’s still true. You can’t style columns, for example, by alternating background colours using some sort of :nth-column() pseudo-class selector. You can add a column-rule between columns using border-style values like dashed, dotted, and solid, and who can forget those evergreen groove and ridge styles? But you can’t apply border-image values to a column-rule, which seems odd as they were introduced at roughly the same time. The Multi-Column Layout is imperfect, and there’s plenty I wish it could do in the future, but that doesn’t explain why most people ignore what it can do today.
Patchy browser implementation for a long time
Legacy browsers simply ignored the column properties they couldn’t process. But, when Multi-Column Layout was first launched, most designers and developers had yet to accept that websites needn’t look the same in every browser.
Early on, support for Multi-Column Layout was patchy. However, browsers caught up over time, and although there are still discrepancies — especially in controlling content breaks — Multi-Column Layout has now been implemented widely. Yet, for some reason, many designers and developers I speak to feel that CSS Columns remain broken. Yes, there’s plenty that browser makers should do to improve their implementations, but that shouldn’t prevent people from using the solid parts today.
Readability and usability with scrolling
Maybe the main reason designers and developers haven’t embraced Multi-Column Layout as they have CSS Grid and Flexbox isn’t in the specification or its implementation but in its usability. Rachel pointed this out in her article:
“One reason we don’t see multicol used much on the web is that it would be very easy to end up with a reading experience which made the reader scroll in the block dimension. That would mean scrolling up and down vertically for those of us using English or another vertical writing mode. This is not a good reading experience!”
That’s true. No one would enjoy repeatedly scrolling up and down to read a long passage of content set in columns. She went on:
“Neither of these things is ideal, and using multicol on the web is something we need to think about very carefully in terms of the amount of content we might be aiming to flow into our columns.”
But, let’s face it, thinking very carefully is what designers and developers should always be doing.
Sure, if you’re dumb enough to dump a large amount of content into columns without thinking about its design, you’ll end up serving readers a poor experience. But why would you do that when headlines, images, and quotes can span columns and reset the column flow, instantly improving readability? Add to that container queries and newer unit values for text sizing, and there really isn’t a reason to avoid using Multi-Column Layout any longer.
A brief refresher on properties and values
Let’s run through a refresher. There are two ways to flow content into multiple columns; first, by defining the number of columns you need using the column-count property:
CodePen Embed Fallback
Second, and often best, is specifying the column width, leaving a browser to decide how many columns will fit along the inline axis. For example, I’m using column-width to specify that my columns are over 18rem. A browser creates as many 18rem columns as possible to fit and then shares any remaining space between them.
CodePen Embed Fallback
Then, there is the gutter (or column-gap) between columns, which you can specify using any length unit. I prefer using rem units to maintain the gutters’ relationship to the text size, but if your gutters need to be 1em, you can leave this out, as that’s a browser’s default gap.
CodePen Embed Fallback
The final column property is that divider (or column-rule) to the gutters, which adds visual separation between columns. Again, you can set a thickness and use border-style values like dashed, dotted, and solid.
CodePen Embed Fallback
These examples will be seen whenever you encounter a Multi-Column Layout tutorial, including CSS-Tricks’ own Almanac. The Multi-Column Layout syntax is one of the simplest in the suite of CSS layout tools, which is another reason why there are few reasons not to use it.
Multi-Column Layout is even more relevant today
When I wrote Transcending CSS and first explained the emerging Multi-Column Layout, there were no rem or viewport units, no :has() or other advanced selectors, no container queries, and no routine use of media queries because responsive design hadn’t been invented.
We didn’t have calc() or clamp() for adjusting text sizes, and there was no CSS Grid or Flexible Box Layout for precise control over a layout. Now we do, and all these properties help to make Multi-Column Layout even more relevant today.
Now, you can use rem or viewport units combined with calc() and clamp() to adapt the text size inside CSS Columns. You can use :has() to specify when columns are created, depending on the type of content they contain. Or you might use container queries to implement several columns only when a container is large enough to display them. Of course, you can also combine a Multi-Column Layout with CSS Grid or Flexible Box Layout for even more imaginative layout designs.
Using Multi-Column Layout today
Patty Meltt is an up-and-coming country music sensation. She’s not real, but the challenges of designing and developing websites like hers are.
My challenge was to implement a flexible article layout without media queries which adapts not only to screen size but also whether or not a
is present. To improve the readability of running text in what would potentially be too-long lines, it should be set in columns to narrow the measure. And, as a final touch, the text size should adapt to the width of the container, not the viewport.
Article with no element. What would potentially be too-long lines of text are set in columns to improve readability by narrowing the measure.Article containing a element. No column text is needed for this narrower measure.
I started by adding Multi-Column Layout styles to the element using the column-width property to set the width of each column to 40ch (characters). The max-width and automatic inline margins reduce the content width and center it in the viewport:
This next min-width: min(100%, 30rem) — applied to both the and
— is a combination of the min-width property and the min() CSS function. The min() function allows you to specify two or more values, and a browser will choose the smallest value from them. This is incredibly useful for responsive layouts where you want to control the size of an element based on different conditions:
What’s efficient about this implementation is that Multi-Column Layout styles are applied throughout, with no need for media queries to switch them on or off.
Adjusting text size in relation to column width helps improve readability. This has only recently become easy to implement with the introduction of container queries, their associated values including cqi, cqw, cqmin, and cqmax. And the clamp() function. Fortunately, you don’t have to work out these text sizes manually as ClearLeft’s Utopia will do the job for you.
My headlines and paragraph sizes are clamped to their minimum and maximum rem sizes and between them text is fluid depending on their container’s inline size:
So, to specify the as the container on which those text sizes are based, I applied a container query for its inline size:
main {
container-type: inline-size;
}
Open the final result in a desktop browser, when you’re in front of one. It’s a flexible article layout without media queries which adapts to screen size and the presence of a
. Multi-Column Layout sets text in columns to narrow the measure and the text size adapts to the width of its container, not the viewport.
CodePen Embed Fallback
Modern CSS is solving many prior problems
Structure content with spanning elements which will restart the flow of columns and prevent people from scrolling long distances.Prevent figures from dividing their images and captions between columns.
Almost every article I’ve ever read about Multi-Column Layout focuses on its flaws, especially usability. CSS-Tricks’ own Geoff Graham even mentioned the scrolling up and down issue when he asked, “When Do You Use CSS Columns?”
“But an entire long-form article split into columns? I love it in newspapers but am hesitant to scroll down a webpage to read one column, only to scroll back up to do it again.”
Fortunately, the column-span property — which enables headlines, images, and quotes to span columns, resets the column flow, and instantly improves readability — now has solid support in browsers:
h1, h2, blockquote {
column-span: all;
}
But the solution to the scrolling up and down issue isn’t purely technical. It also requires content design. This means that content creators and designers must think carefully about the frequency and type of spanning elements, dividing a Multi-Column Layout into shallower sections, reducing the need to scroll and improving someone’s reading experience.
Another prior problem was preventing headlines from becoming detached from their content and figures, dividing their images and captions between columns. Thankfully, the break-after property now also has widespread support, so orphaned images and captions are now a thing of the past:
figure {
break-after: column;
}
Open this final example in a desktop browser:
CodePen Embed Fallback
You should take a fresh look at Multi-Column Layout
Multi-Column Layout isn’t a shiny new tool. In fact, it remains one of the most underused layout tools in CSS. It’s had, and still has, plenty of problems, but they haven’t reduced its usefulness or its ability to add an extra level of refinement to a product or website’s design. Whether you haven’t used Multi-Column Layout in a while or maybe have never tried it, now’s the time to take a fresh look at Multi-Column Layout.
The browser back button, once a vital tool for navigating the internet, is now a source of love-hate relationships among users, developers, and designers. While it provides a safety net for users, its unpredictability often disrupts modern web experiences.
When it comes to positioning elements on a page, including text, there are many ways to go about it in CSS — the literal position property with corresponding inset-* properties, translate, margin, anchor() (limited browser support at the moment), and so forth. The offset property is another one that belongs in that list.
The offset property is typically used for animating an element along a predetermined path. For instance, the square in the following example traverses a circular path:
@property --p {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
.square {
offset: top 50% right 50% circle(50%) var(--p);
transition: --p 1s linear;
/* Equivalent to:
offset-position: top 50% right 50%;
offset-path: circle(50%);
offset-distance: var(--p); */
/* etc. */
}
.circle:hover .square{ --p: 100%; }
CodePen Embed Fallback
A registered CSS custom property (--p) is used to set and animate the offset distance of the square element. The animation is possible because an element can be positioned at any point in a given path using offset. and maybe you didn’t know this, but offset is a shorthand property comprised of the following constituent properties:
offset-position: The path’s starting point
offset-path: The shape along which the element can be moved
offset-distance: A distance along the path on which the element is moved
offset-rotate: The rotation angle of an element relative to its anchor point and offset path
offset-anchor: A position within the element that’s aligned to the path
The offset-path property is the one that’s important to what we’re trying to achieve. It accepts a shape value — including SVG shapes or CSS shape functions — as well as reference boxes of the containing element to create the path.
Reference boxes? Those are an element’s dimensions according to the CSS Box Model, including content-box, padding-box, border-box, as well as SVG contexts, such as the view-box, fill-box, and stroke-box. These simplify how we position elements along the edges of their containing elements. Here’s an example: all the small squares below are placed in the default top-left corner of their containing elements’ content-box. In contrast, the small circles are positioned along the top-right corner (25% into their containing elements’ square perimeter) of the content-box, border-box, and padding-box, respectively.
<div class="big">
<div class="small circle"></div>
<div class="small square"></div>
<p>She sells sea shells by the seashore</p>
</div>
<div class="big">
<div class="small circle"></div>
<div class="small square"></div>
<p>She sells sea shells by the seashore</p>
</div>
<div class="big">
<div class="small circle"></div>
<div class="small square"></div>
<p>She sells sea shells by the seashore</p>
</div>
Note: You can separate the element’s offset-positioned layout context if you don’t want to allocated space for it inside its containing parent element. That’s how I’ve approached it in the example above so that the paragraph text inside can sit flush against the edges. As a result, the offset positioned elements (small squares and circles) are given their own contexts using position: absolute, which removes them from the normal document flow.
This method, positioning relative to reference boxes, makes it easy to place elements like notification dots and ornamental ribbon tips along the periphery of some UI module. It further simplifies the placement of texts along a containing block’s edges, as offset can also rotate elements along the path, thanks to offset-rotate. A simple example shows the date of an article placed at a block’s right edge:
<article>
<h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>
<!-- paragraphs -->
<div class="date">Published on 11<sup>th</sup> Dec</div>
<cite>An excerpt from the HBR article</cite>
</article>
article {
container-type: inline-size;
/* etc. */
}
.date {
offset: padding-box 100cqw 90deg / left 0 bottom -10px;
/*
Equivalent to:
offset-path: padding-box;
offset-distance: 100cqw; (100% of the container element's width)
offset-rotate: 90deg;
offset-anchor: left 0 bottom -10px;
*/
}
CodePen Embed Fallback
As we just saw, using the offset property with a reference box path and container units is even more efficient — you can easily set the offset distance based on the containing element’s width or height. I’ll include a reference for learning more about container queries and container query units in the “Further Reading” section at the end of this article.
There’s also the offset-anchor property that’s used in that last example. It provides the anchor for the element’s displacement and rotation — for instance, the 90 degree rotation in the example happens from the element’s bottom-left corner. The offset-anchor property can also be used to move the element either inward or outward from the reference box by adjusting inset-* values — for instance, the bottom -10px arguments pull the element’s bottom edge outwards from its containing element’s padding-box. This enhances the precision of placements, also demonstrated below.
Whether for graphic designs like text along borders, textual annotations, or even dynamic texts like error messaging, CSS offset is an easy-to-use option to achieve all of that. We can position the elements along the reference boxes of their containing parent elements, rotate them, and even add animation if needed.
DEI initiatives promise transformative change in creative industries but often devolve into performative actions that undermine trust and stifle innovation.
Keeping vehicles running smoothly is the name of the game in fleet management. Downtime costs money, disrupts schedules, and affects customer satisfaction. (It also draws the scrutiny of upper-level management, which is never a good idea.)
That’s where predictive maintenance comes in. It gives you a proactive approach that leverages data and technology to forecast potential issues before they turn into costly problems.
Predictive maintenance has become a little bit of a buzzword over the past few years. But hopefully this article will show you that it’s a little more than just a flippant term. It’s actually a powerful tool that can transform the way you manage your fleet…when done correctly.
By identifying problems early, you can save time, reduce costs, and improve overall efficiency.
With all of this said, here are six key benefits of adopting predictive maintenance for your fleet.
1. Less Downtime
Unexpected breakdowns are one of the biggest challenges in fleet management. When a vehicle is sidelined for emergency repairs, it can throw off your entire operation. Predictive maintenance helps you avoid these scenarios by using real-time data to monitor the health of your vehicles and identify potential issues before they lead to failures.
For example, sensors can track the performance of critical components like brakes, tires, and engines, sending alerts when they show signs of wear or inefficiency. This allows you to schedule repairs at convenient times, ensuring minimal disruption to your workflow. Over time, fewer breakdowns mean improved reliability and smoother operations.
2. Reduced Maintenance Costs
Reactive maintenance – waiting for something to break before fixing it – can be expensive. Emergency repairs often come with higher labor costs and expedited shipping fees for parts. Then there’s the potential for more extensive damage if issues are left unchecked.
Predictive maintenance, on the other hand, allows you to address small problems before they escalate into costly repairs. By replacing components when they show early signs of wear instead of waiting for them to fail, you extend the lifespan of your vehicles and keep repair bills under control.
For example, catching a minor tire alignment issue early can prevent uneven wear that leads to costly tire replacements. Over time, these small savings add up, reducing your overall maintenance expenses in a pretty significant way.
3. Improved Safety
When your fleet is well-maintained, your drivers and cargo are safer. Predictive maintenance plays a critical role in preventing accidents caused by mechanical failures, such as brake malfunctions or tire blowouts.
By monitoring the condition of key components and addressing issues proactively, you reduce the risk of breakdowns on the road. This not only protects your drivers but also minimizes liability and ensures compliance with safety regulations.
On top of this, predictive maintenance builds trust with your drivers. This might not be immediately obvious, but when drivers know their vehicles are being carefully monitored and maintained, they can focus on their jobs without worrying about potential safety hazards.
4. Enhanced Efficiency
Predictive maintenance streamlines your operations by ensuring your fleet runs at peak performance. Vehicles that are in top condition consume less fuel, experience fewer delays, and require less frequent servicing.
For instance, a properly maintained engine operates more efficiently, reducing fuel consumption and emissions. Similarly, well-maintained tires improve handling and fuel efficiency, cutting costs and boosting productivity.
Predictive maintenance also simplifies scheduling. Instead of scrambling to address unexpected issues, you can plan maintenance tasks during downtime or off-peak hours, ensuring your vehicles are ready to hit the road when needed.
5. Data-Driven Decision-Making
Predictive maintenance relies on data collected from your fleet to make informed decisions. Telematics systems and sensors provide real-time insights into vehicle performance, such as engine temperature, tire pressure, and fuel efficiency.
This data lets you identify trends and make smarter decisions about repairs, replacements, and upgrades. (e.g. If a particular model in your fleet consistently shows signs of wear on specific components, you can adjust your maintenance schedule or consider upgrading to more reliable vehicles.)
Data-driven insights like these also help you evaluate the return on investment (ROI) of your maintenance strategies, making sure you’re allocating resources effectively.
6. Extends Lifespan of the Vehicle
Your fleet is a significant investment, and maximizing the lifespan of each vehicle is essential for maintaining profitability. Predictive maintenance helps you protect this investment by addressing wear and tear before it causes irreversible damage.
For example, regular monitoring of engine performance can prevent overheating or component failure, while timely oil changes and fluid top-offs ensure optimal operation. Over time, these practices reduce the strain on your vehicles, allowing them to stay on the road longer and reducing the need for premature replacements.
Extending the life of your fleet not only saves money but also reduces the environmental impact of manufacturing and disposing of vehicles. It’s a win-win for your bottom line and the planet.
Putting it All Together
For decades, fleets have operated on reactive terms (when it comes to maintenance). But now that we have the software and knowledge to act in a more predictive manner, it’s crucial that you rethink your approach. Yes, it will require some investment and overhaul to transition from your current approach to a new one, but the long-term ROI makes it an easy decision.
Dropbox has introduced a redesigned Brand Guidelines microsite, providing a comprehensive and interactive resource to explore its visual and verbal identity. Featuring tools like a variable type explorer, an icon slot machine, and detailed guidelines on color, typography, and more…
Pinterest’s 2025 Color Palette introduces a vibrant mix of shades, including Butter Yellow, Cherry Red, and Dill Green, reflecting cultural trends and inspiring innovation across design fields. From branding and graphic design to interior spaces, this curated palette offers endless creative possibilities for designers.
Product Hunt has opened voting for the 2024 Golden Kitty Awards, celebrating the year’s most innovative products across 17 categories, including AI, design tools, and climate tech. Winners, determined by community votes, will receive the iconic Golden Kitty trophy and recognition for their groundbreaking contributions.
Chris wrote about “Likes” pages a long while back. The idea is rather simple: “Like” an item in your RSS reader and display it in a feed of other liked items. The little example Chris made is still really good.
CodePen Embed Fallback
There were two things Chris noted at the time. One was that he used a public CORS proxy that he wouldn’t use in a production environment. Good idea to nix that, security and all. The other was that he’d consider using WordPress transients to fetch and cache the data to work around CORS.
I decided to do that! The result is this WordPress block I can drop right in here. I’ll plop it in a
One of the running jokes and/or discussion I am sick and tired of is people belittling HTML. Yes, HTML is not a programming language. No, HTML should not just be a compilation target. Learning HTML is a solid investment and not hard to do.
Nothing fancy. Mostly copying how Dave Rupert does it on his site where you get a cross-fade animation on the whole page generally, and a little position animation on the page title specifically.
Back in 2023, I belatedly jumped on the bandwagon of people posting their CSS wish lists for the coming year. This year I’m doing all that again, less belatedly! (I didn’t do it last year because I couldn’t even. Get it?)
A major risk of using ARIA to define text content is it typically gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services frequently miss content in ARIA attributes when sending text strings to localization vendors.
6 years back I posted the Simplest Way to Load CSS Asynchronously to document a hack we’d been using for at least 6 years prior to that. The use case for this hack is to load CSS files asynchronously, something that HTML itself still does not support, even though…
I was chatting with DebugBear’s Matt Zeunert and, in the process, he casually mentioned this thing called Tight Mode when describing how browsers fetch and prioritize resources. I wanted to nod along like I knew what he was talking about…
I’ve been excited by the potential of text-box-trim, text-edge and text-box for a while. They’re in draft status at the moment, but when more browser support is available, this capability will open up some exciting possibilities for improving typesetting in the browser, as well as giving us more…
It’s a little different. For one, I’m only fetching 10 items at a time. We could push that to infinity but that comes with a performance tax, not to mention I have no way of organizing the items for them to be grouped and filtered. Maybe that’ll be a future enhancement!
The Chris demo provided the bones and it does most of the heavy lifting. The “tough” parts were square-pegging the thing into a WordPress block architecture and then getting transients going. This is my first time working with transients, so I thought I’d share the relevant code and pick it apart.
The $transient_key is simply a name that identifies the transient when we set it and get it. In fact, the $cached_data is the getter so that part’s done. Check!
I only want the $cached_data if it exists, so there’s a check for that:
if ($cached_data) {
return new WP_REST_Response($cached_data, 200);
}
This also establishes a new response from the WordPress REST API, which is where the data is cached. Rather than pull the data directly from Feedbin, I’m pulling it and caching it in the REST API. This way, CORS is no longer an issue being that the starred items are now locally stored on my own domain. That’s where the wp_remote_get() function comes in to form that response from Feedbin as the origin:
Similarly, I decided to throw an error if there’s no $response. That means there’s no freshly $cached_data and that’s something I want to know right away.
if (is_wp_error($response)) {
return new WP_REST_Response('Error fetching data', 500);
}
The bulk of the work is merely parsing the XML data I get back from Feedbin to JSON. This scours the XML and loops through each item to get its title, link, publish date, and description:
“Description” is a loaded term. It could be the full body of a post or an excerpt — we don’t know until we get it! So, I’m splicing and trimming it in the block’s Edit component to stub it at no more than 50 words. There’s a little risk there because I’m rendering the HTML I get back from the API. Security, yes. But there’s also the chance I render an open tag without its closing counterpart, muffing up my layout. I know there are libraries to address that but I’m keeping things simple for now.
Now it’s time to set the transient once things have been fetched and parsed:
The WordPress docs are great at explaining the set_transient() function. It takes three arguments, the first being the $transient_key that was named earlier to identify which transient is getting set. The other two:
$value: This is the object we’re storing in the named transient. That’s the $items object handling all the parsing.
$expiration: How long should this transient last? It wouldn’t be transient if it lingered around forever, so we set an amount of time expressed in seconds. Mine lingers for 12 hours before it expires and then updates the next time a visitor hits the page.
OK, time to return the items from the REST API as a new response:
return new WP_REST_Response($items, 200);
That’s it! Well, at least for setting and getting the transient. The next thing I realized I needed was a custom REST API endpoint to call the data. I really had to lean on the WordPress docs to get this going:
That’s where I struggled most and felt like this all took wayyyyy too much time. Well, that and sparring with the block itself. I find it super hard to get the front and back end components to sync up and, honestly, a lot of that code looks super redundant if you were to scope it out. That’s another story altogether.
Enjoy reading what we’re reading! I put a page together that pulls in the 10 most recent items with a link to subscribe to the full feed.
Squid Game’s visual design is a masterclass in leveraging bold colors, minimalism, geometry, contrast, and mystery to evoke emotion and captivate audiences. For web designers, it offers powerful lessons on purposeful design that prioritizes storytelling and emotional impact over safe, conventional choices.
