The most famous line of code to have come out of CSS grid so far is:<\/p>\n
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));<\/code><\/pre>\nWithout any media queries, that will set up a grid container that has a flexible number of columns. The columns will stretch a little, until there is enough room for another one, and then a new column is added, and in reverse.<\/p>\n
The only weakness here is that first value in minmax()<\/code> (the 10rem<\/abbr> value above). If the container is narrower than whatever that minimum is, elements in that single column will overflow. Evan Minto shows us the solution with min()<\/code>:<\/p>\ngrid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));<\/code><\/pre>\nThe browser support isn’t widespread yet, but Evan demonstrates some progressive enhancement techniques to take advantage of now.<\/p>\n","protected":false},"excerpt":{"rendered":"
The most famous line of code to have come out of CSS grid so far is: grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); Without any media queries, that will set up a grid container that has a flexible number of columns. The columns will stretch a little, until there is enough room for another one, and then a […]<\/p>\n","protected":false},"author":3,"featured_media":293314,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[686,12509,1301],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/intrinsically-responsive-css-grid.jpg?fit=1200%2C547&ssl=1","jetpack-related-posts":[{"id":273108,"url":"https:\/\/css-tricks.com\/css-grid-in-ie-debunking-common-ie-grid-misconceptions\/","url_meta":{"origin":293218,"position":0},"title":"CSS Grid in IE: Debunking Common IE Grid Misconceptions","date":"July 2, 2018","format":false,"excerpt":"This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332990,"url":"https:\/\/css-tricks.com\/you-want-minmax10px-1fr-not-1fr\/","url_meta":{"origin":293218,"position":1},"title":"You want minmax(10px, 1fr) not 1fr","date":"January 22, 2021","format":false,"excerpt":"There are a lot of grids on the web like this: .grid { display: grid; grid-template-columns: repeat(3, 1fr); } My message is that what they really should be is: .grid { display: grid; grid-template-columns: repeat(3, minmax(10px, 1fr)); } Why? In the former, the minimum width of the grid column is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/Untitled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363541,"url":"https:\/\/css-tricks.com\/an-auto-filling-css-grid-with-max-columns\/","url_meta":{"origin":293218,"position":2},"title":"An Auto-Filling CSS Grid With Max Columns of a Minimum Size","date":"February 16, 2022","format":false,"excerpt":"Within Drupal 10 core, we\u2019re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world. The requirements are: The user specifies a maximum number of columns. This is the auto-filling grid\u2019s \u201cnatural\u201d state.If a grid cell goes under a user-specified width, the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/grid-lightbulb.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283245,"url":"https:\/\/css-tricks.com\/look-ma-no-media-queries-responsive-layouts-using-css-grid\/","url_meta":{"origin":293218,"position":3},"title":"Look Ma, No Media Queries! Responsive Layouts Using CSS Grid","date":"February 26, 2019","format":false,"excerpt":"Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing \"hacky\" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":257517,"url":"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/","url_meta":{"origin":293218,"position":4},"title":"The Difference Between Explicit and Implicit Grids","date":"August 10, 2017","format":false,"excerpt":"Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310146,"url":"https:\/\/css-tricks.com\/equal-width-columns-in-css-grid-are-kinda-weird\/","url_meta":{"origin":293218,"position":5},"title":"Equal Width Columns in CSS Grid are Kinda Weird","date":"May 13, 2020","format":false,"excerpt":"Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you'd have equal-width columns, but that's a rare day. What you usually mean is three columns of equal fluid width. We've got fractional units for that, like grid-template-columns: 1fr 1fr fr;. That's usually fine, but they aren't\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/grid-lines.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293218"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=293218"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293218\/revisions"}],"predecessor-version":[{"id":304675,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293218\/revisions\/304675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/293314"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=293218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=293218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=293218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}