Published October 26, 2026
CSS clamp() for fluid sidebar width is one grid track, and I am going to give it to you first and explain it second, because the explanation is shorter once you have seen the line work. Here it is:
.layout {
display: grid;
grid-template-columns: clamp(220px, 28%, 360px) 1fr;
gap: 1.5rem;
}That is the whole trick, and the reason I like it is that it replaces two media queries and a fixed pixel width with a sidebar that behaves itself at every size. On a 1,440 pixel monitor, 28 percent of the layout is about 403 pixels, so the 360 ceiling wins and the sidebar stops growing before it starts competing with the article it is supposed to support. On a 1,000 pixel laptop, 28 percent is 280 pixels, so the sidebar sits at 280 and the main column keeps the rest. On a 768 pixel tablet, 28 percent is 215 pixels, so the 220 floor wins and the navigation stays readable instead of collapsing into a sliver.
Most sidebar code I inherited did this job with a fixed width and a breakpoint that swapped it for a stacked layout, and the fixed width was always wrong somewhere. At 300 pixels it crowded the content on a laptop. At 240 it felt cramped on a desktop. The breakpoint fixed the phone case and ignored everything in between, which is where most real screens actually live. A fluid track does not have that problem, because it keeps adjusting in the range where people resize browser windows, split screens, and rotate tablets, all without a breakpoint firing.
Picking the three numbers is a design decision, not a formula, and I pick them from the content. The floor comes from the narrowest thing the sidebar must hold without wrapping badly. For a navigation list with short labels, 220 pixels is usually enough. For a sidebar holding a search box and a filter panel with longer labels, I start at 260. The ceiling comes from the widest the sidebar can get before it stops looking like a sidebar and starts looking like a second column competing for attention. On a content site, that line sits around 320 to 360 pixels. The preferred value is the share of the layout you want it to take when nothing is constraining it, and 25 to 30 percent is the range I reach for first.
CSS clamp() for fluid sidebar width
The trap with sidebars is reaching for viewport units, because viewport units measure the wrong thing. A sidebar written as clamp(220px, 25vw, 360px) measures the browser window, not the layout. Put that sidebar inside a centered 1,100 pixel container on a 1,920 pixel monitor and 25vw is 480 pixels, so the ceiling wins and the sidebar is 360 pixels wide inside a container where 28 percent would have been about 308. Put the same sidebar inside a narrow panel and vw still reports the full window, so the sidebar can blow out its container entirely. Percentages measure the grid container, which is the thing the sidebar actually shares space with, so percentages are the honest unit here. If the sidebar lives inside a reusable component rather than a page layout, container query units are the honest unit instead, because they measure the component.
Flexbox gives you a second way to write the same idea, and it is worth knowing because some layouts are flex, not grid. The Every Layout sidebar pattern uses flex-basis with clamp, roughly flex-basis: clamp(20ch, 33.333%, 100%), with the main column set to grow and a minimum inline size that forces a wrap. The ch floor is doing the same job as my pixel floor, except it is measured in characters, which suits text-heavy sidebars. I use the grid version on page layouts and the flex version inside components, and I do not try to make one of them do both jobs.
One thing clamp does not do is stack. A fluid sidebar on a 375 pixel phone is still a sidebar next to a main column, and at that width the two columns are both too narrow to read. You still need a stacking rule. The simplest version is a media query that switches the grid to one column below about 700 pixels. The version I prefer when the layout allows it is flex-wrap with a minimum width on the main column, so the sidebar drops below the content on its own when there is not room for both. Either way, keep the stacking rule separate in your head from the width rule. Clamp sizes the sidebar. Something else decides when it stops being beside the content.
Test the result the way a reader will actually use it, not just at your three breakpoints. Drag the browser window slowly from narrow to wide and watch for the two failure modes: text in the sidebar wrapping mid-word, which means the floor is too low for its content, and the sidebar holding steady while the main column does all the shrinking, which means the ceiling is too high. When both failure modes are gone, the sidebar feels unremarkable, which is the highest praise a sidebar can get. Nobody should notice it. They should just read the page.
Frequently asked questions
What is a good clamp() range for a sidebar?
Start with clamp(220px, 28%, 360px). The 220px floor keeps navigation readable, the 28% preferred value lets it grow with the layout, and the 360px ceiling stops it from eating the main column on wide monitors.
Should I use vw inside clamp() for a sidebar?
Usually not. Viewport units measure the whole viewport, not the layout the sidebar sits in, so a vw sidebar can overflow a narrow container. Use a percentage, or container query units when the sidebar lives inside a component.
How do I stack a clamp() sidebar on phones?
Switch the grid to one column below your chosen breakpoint, or use flex-wrap with a minimum inline size on the main column so the sidebar drops below it on its own. Clamp handles the width range, not the stacking.
Can clamp() go directly in grid-template-columns?
Yes. A track like clamp(220px, 28%, 360px) is a valid grid track size, and it behaves like a fixed track that happens to move between its floor and ceiling.
What if my sidebar content is wider than the floor?
Raise the floor, shorten the content, or let that content wrap. A floor that is narrower than your longest unbreakable word guarantees overflow, and clamp cannot fix content that refuses to break.
Run your own numbers before you decide.
Use the CSS Clamp Calculator to generate your own fluid sidebar width and export it to Tailwind.