You’ve got a three-column grid, but when the browser window is less than 500px wide, you break to a one-column grid. Let us review some of the ways.<\/p>\n\n\n\n
.grid<\/span> {\n display<\/span>: grid;\n grid-template-columns<\/span>: 1<\/span>fr 1<\/span>fr 1<\/span>fr;\n}\n\n@media<\/span> (width < 500px<\/span>) {\n .grid<\/span> {\n grid-template-columns<\/span>: 1<\/span>fr;\n }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nAside from the slightly-newish media query syntax there, this has deep browser support and is a classic way of achieving our goal. <\/p>\n\n\n\n
Advantages?<\/p>\n\n\n\n
\n- The single top-level media query could contain other selectors so you can do more work under the logic of a single media query.<\/li>\n<\/ul>\n\n\n\n
Disadvantages?<\/p>\n\n\n\n
\n- You need to repeat the
.grid<\/code> selector (more code, error prone).<\/li>\n\n\n\n- You need to repeat the
grid-template-columns<\/code> property (more code, error prone).<\/li>\n\n\n\n- The property you are changing isn’t particularly close to the original.<\/li>\n<\/ul>\n\n\n\n
2) Nested Media Query<\/h2>\n\n\n.grid<\/span> {\n display<\/span>: grid;\n grid-template-columns<\/span>: 1<\/span>fr 1<\/span>fr 1<\/span>fr;\n @media (width < 500px) {\n grid-template-columns<\/span>: 1<\/span>fr;\n }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nAdvantages?<\/p>\n\n\n\n
\n- The nesting puts the property you are changing nearby the original, helping understanding at a glance what changes. <\/li>\n\n\n\n
- You don’t have to repeat the
.grid<\/code> selector.<\/li>\n<\/ul>\n\n\n\nDisadvantages?<\/p>\n\n\n\n
\n- The 500px breakpoint might be a common one where you make other changes to the design. Nesting might have you sprinkling\/repeating them throughout the code rather than consolidating the changes together.<\/li>\n<\/ul>\n\n\n\n
3) Variablizing the Columns<\/h2>\n\n\nhtml<\/span> {\n --cols<\/span>: 1<\/span>fr 1<\/span>fr 1<\/span>fr;\n}\n\n.grid<\/span> {\n display<\/span>: grid;\n grid-template-columns<\/span>: var<\/span>(--cols);\n @media (width < 500px) {\n --cols<\/span>: 1<\/span>fr;\n }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nWe’re continuing the nesting here, but using a custom property to store and apply the grid-template-columns<\/code> value. <\/p>\n\n\n\nAdvantages?<\/p>\n\n\n\n
\n- As a custom property set at a high level, this value could be re-used in other places.<\/li>\n\n\n\n
- Don’t have to repeat the
grid-template-columns<\/code> property.<\/li>\n<\/ul>\n\n\n\nDisadvantages?<\/p>\n\n\n\n
\n- Naming things is hard.<\/li>\n\n\n\n
- Sometimes custom property usage causes abstraction that is more confusing than helpful.<\/li>\n<\/ul>\n\n\n\n
4) Using a Custom Function<\/h2>\n\n\n@function<\/span> --cols() {\n result<\/span>: 1fr<\/span> 1fr<\/span> 1fr<\/span>;\n @media<\/span> (width < 500px<\/span>) {\n result<\/span>: 1fr<\/span>;\n }\n}\n\n.grid<\/span> {\n display<\/span>: grid;\n grid-template-columns<\/span>: --cols<\/span>();\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nNewfangled CSS! Custom value functions return a single value, and thus can be used to abstract away logic. <\/p>\n\n\n\n
Advantages?<\/p>\n\n\n\n
\n- Abstracted away logic can make the more declarative design block easier to read.<\/li>\n\n\n\n
- Like a custom property, the function can be re-used.<\/li>\n<\/ul>\n\n\n\n
Disadvantages?<\/p>\n\n\n\n
\n- Very low browser support so far.<\/li>\n\n\n\n
- Abstraction doesn’t always mean more understandable code.<\/li>\n\n\n\n
- Unfortunate you can’t pass an argument for the media query size.<\/li>\n<\/ul>\n\n\n\n
5) Custom Function + if()<\/h2>\n\n\n@function<\/span> --cols() {\n result<\/span>: if<\/span>(\n media<\/span>(width<\/span> < 500px<\/span>): 1fr<\/span>;\n else<\/span>: 1fr<\/span> 1fr<\/span> 1fr<\/span>;\n )\n}\n\n.grid<\/span> {\n display<\/span>: grid;\n grid-template-columns<\/span>: --cols<\/span>();\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nEven more newfangled CSS! (Also, you could imagine using if()<\/code> alone for grid-template-columns<\/code> without the custom function I’m sure.)<\/p>\n\n\n\nAdvantages?<\/p>\n\n\n\n
\n- The custom function doesn’t need two
result<\/code> properties which could be a smidge confusing.<\/li>\n\n\n\n- The more conditions there are, they more terse and nice feeling the
if()<\/code> syntax looks.<\/li>\n<\/ul>\n\n\n\nDisadvantages?<\/p>\n\n\n\n
\n- Very low browser support, especially combining two brand new features.<\/li>\n\n\n\n
- So friggin fancy it nearly breaks my old eyes.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nSo?!<\/p>\n\n\n\n
What do you think? What is your favorite here? Or do you have an alternate entry? <\/p>\n","protected":false},"excerpt":{"rendered":"
There are usually multiple ways to do the same thing on the web. Sometimes… a lot of ways. Which is “better” can be a matter of taste or which abstraction buys the most value. Check out this CSS example and see which you prefer.<\/p>\n","protected":false},"author":1,"featured_media":7156,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[395,7,123,396,45],"class_list":["post-7153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-function","tag-css","tag-grid","tag-if","tag-media-query"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/09\/cols.png?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=7153"}],"version-history":[{"count":5,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7153\/revisions"}],"predecessor-version":[{"id":7169,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/7153\/revisions\/7169"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/7156"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=7153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=7153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=7153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}