--- title: SmolCSS | daily.dev description: SmolCSS create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the... canonical: https://daily.dev/posts/smolcss-9qwgpgj43 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: SmolCSS | daily.dev og:description: SmolCSS create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the... og:url: https://daily.dev/posts/smolcss-9qwgpgj43 og:image: https://api.daily.dev/og/posts/9qwgpgj43.png og:image:alt: SmolCSS 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. # SmolCSS **[Community Picks](https://daily.dev/sources/community)** · 26 min read · 170 upvotes · 8 comments ## Summary SmolCSS create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate, and items will begin to break to a new row if the width reaches the --min value. The smol stacked layout is a grid feature that can often replace older techniques that relied on absolute positioning. ## 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. **@ghost** · 5 upvotes > ooooh these are all very nice, remember when centering vertically and horizontally would take you an unnecessarily large amount of markup? **@dharmax** · 2 upvotes > i liked it. This is much better than using a library/framework for CSS, because most of those are non-semantic and thus making it all pretty wrong. Doing proper CSS doesn't require a framework, if one knows what to do, although there are some reusable patterns and definitions. This article educates and provide reusable snippets for copy/pasting - that's the best, tmho. > Some examples/snippets, though, can be much simpler, tmo (e.g. the avatars). **@vagabond** · 1 upvotes > Excellent resource. Bookmarked. **@mdrokz** · 1 upvotes > This is a really unique approach on layouts & cards for UI **@thesobercoder** · 1 upvotes > Very interesting indeed! ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/smolcss-9qwgpgj43) ```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":"SmolCSS","url":"https://daily.dev/posts/smolcss-9qwgpgj43","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/smolcss-9qwgpgj43"},"datePublished":"2023-05-29T07:51:40.049Z","dateModified":"2023-12-07T12:02:45.284Z","description":"SmolCSS create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9f8240d21f223d59607bb8443c2f210d?_a=AQADKdt","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9f8240d21f223d59607bb8443c2f210d?_a=AQADKdt","isAccessibleForFree":true,"articleSection":"Community Picks","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":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":8,"discussionUrl":"https://daily.dev/posts/smolcss-9qwgpgj43","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":170},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":8}],"keywords":"css","timeRequired":"PT26M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"SmolCSS"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/smolcss-9qwgpgj43","comment":[{"@type":"Comment","text":"ooooh these are all very nice, remember when centering vertically and horizontally would take you an unnecessarily large amount of markup?","datePublished":"2023-05-29T15:49:32.325Z","url":"https://daily.dev/posts/9qwgpgj43#c-CPZnv8AMc","author":{"@type":"Person","name":"Deleted user","url":"https://daily.dev/ghost","image":"https://media.daily.dev/image/upload/s--hNIUzLiO--/f_auto/v1705327420/public/ghost_vlftth"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"i liked it. This is much better than using a library/framework for CSS, because most of those are non-semantic and thus making it all pretty wrong. Doing proper CSS doesn’t require a framework, if one knows what to do, although there are some reusable patterns and definitions. This article educates and provide reusable snippets for copy/pasting - that’s the best, tmho.\nSome examples/snippets, though, can be much simpler, tmo (e.g. the avatars).","datePublished":"2023-05-30T08:19:14.762Z","url":"https://daily.dev/posts/9qwgpgj43#c-pmW6TdCVZ","author":{"@type":"Person","name":"avi tshuva","url":"https://daily.dev/dharmax","image":"https://lh3.googleusercontent.com/a/AGNmyxZ76FOO5TiZHJugAxxnSH-gQSN4NXQUhF1v0olQJb4=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Excellent resource. Bookmarked.","datePublished":"2023-05-29T16:29:51.485Z","url":"https://daily.dev/posts/9qwgpgj43#c-rmEu7f9CZ","author":{"@type":"Person","name":"vagabond","url":"https://daily.dev/vagabond","image":"https://media.daily.dev/image/upload/s--ull8ozvU--/f_auto,q_auto/v1695564667/avatars/avatar_4qdkNqUInuixXUODt2IRF"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is a really unique approach on layouts & cards for UI","datePublished":"2023-05-29T18:55:28.256Z","url":"https://daily.dev/posts/9qwgpgj43#c-ol0gtXLbe","author":{"@type":"Person","name":"Mohammad Munshi","url":"https://daily.dev/mdrokz","image":"https://avatars.githubusercontent.com/u/33598169?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Very interesting indeed!","datePublished":"2023-05-29T15:06:49.226Z","url":"https://daily.dev/posts/9qwgpgj43#c-C8SHecJKV","author":{"@type":"Person","name":"Soham Dasgupta","url":"https://daily.dev/thesobercoder","image":"https://lh3.googleusercontent.com/a-/AOh14GiqRD-M9dki2b0NWBAm-i86UBJLU27XhgsQprjprA=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```