--- title: No more magic numbers for your breakpoints | daily.dev description: Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to... canonical: https://daily.dev/posts/no-more-magic-numbers-for-your-breakpoints-p8vcpi6z2 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: No more magic numbers for your breakpoints | daily.dev og:description: Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to... og:url: https://daily.dev/posts/no-more-magic-numbers-for-your-breakpoints-p8vcpi6z2 og:image: https://api.daily.dev/og/posts/p8vcpi6Z2.png og:image:alt: No more magic numbers for your breakpoints og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # No more magic numbers for your breakpoints **[Kevin Powell](https://daily.dev/sources/kevinpowell)** · 5 min read · 34 upvotes · 3 comments ## Summary Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to break at 90ch, each column is roughly 30 characters wide — aligning with minimum readable line-length guidelines. Unlike media queries, container queries respect the element's own font size, so breakpoints adapt automatically when the base font size changes. This approach replaces magic numbers with meaningful, content-first breakpoints. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@michelosaurusrex** · 3 upvotes > Thx for sharing! ## Similar posts on daily.dev - [Stop Treating CSS Container Queries Like Traditional Media Queries — Smashing Magazine](https://daily.dev/posts/stop-treating-css-container-queries-like-traditional-media-queries-smashing-magazine-opborjqov) · Smashing Magazine · 8 upvotes · 0 comments - [Building a UI Without Breakpoints – Frontend Masters Blog](https://daily.dev/posts/building-a-ui-without-breakpoints-frontend-masters-blog-gttwzftuz) · Frontend Masters · 9 upvotes · 0 comments - [CSS Container Queries](https://daily.dev/posts/css-container-queries-iq9qajosu) · Flavio Copes · 24 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/no-more-magic-numbers-for-your-breakpoints-p8vcpi6z2) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"No more magic numbers for your breakpoints","url":"https://daily.dev/posts/no-more-magic-numbers-for-your-breakpoints-p8vcpi6z2","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/no-more-magic-numbers-for-your-breakpoints-p8vcpi6z2"},"datePublished":"2026-04-22T16:37:41.503Z","dateModified":"2026-04-22T16:37:58.641Z","description":"Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to...","image":"https://i.ytimg.com/vi/4DqIW-gZbHA/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/4DqIW-gZbHA/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Kevin Powell","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Kevin Powell","logo":"https://media.daily.dev/image/upload/s--XK5Rf0kM--/f_auto/v1717745137/logos/kevinpowell","url":"https://daily.dev/sources/kevinpowell"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/no-more-magic-numbers-for-your-breakpoints-p8vcpi6z2","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":34},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"css,ui-design","timeRequired":"PT5M","video":{"@type":"VideoObject","name":"No more magic numbers for your breakpoints","description":"Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to...","thumbnailUrl":"https://i.ytimg.com/vi/4DqIW-gZbHA/sddefault.jpg","uploadDate":"2026-04-22T16:37:41.503Z","duration":"PT5M","url":"https://api.daily.dev/r/p8vcpi6Z2","embedUrl":"https://www.youtube.com/embed/4DqIW-gZbHA"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Kevin Powell","item":"https://daily.dev/sources/kevinpowell"},{"@type":"ListItem","position":3,"name":"No more magic numbers for your breakpoints"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/no-more-magic-numbers-for-your-breakpoints-p8vcpi6z2","comment":[{"@type":"Comment","text":"Thx for sharing!","datePublished":"2026-04-24T08:42:08.592Z","url":"https://daily.dev/posts/p8vcpi6Z2#c-84lqmsyq1","author":{"@type":"Person","name":"Michel Van Autrève","url":"https://daily.dev/michelosaurusrex","image":"https://media.daily.dev/image/upload/s--eV5J7frz--/f_auto/v1771493973/avatars/avatar_xtCSMfHED4G2G66vJvJDU?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}]} ```