{"id":605,"date":"2018-01-06T19:32:04","date_gmt":"2018-01-07T00:32:04","guid":{"rendered":"http:\/\/www.bemdesign.com\/wordpress\/?p=605"},"modified":"2018-01-06T19:32:04","modified_gmt":"2018-01-07T00:32:04","slug":"css-grid-thoughts-on-when-to-use-auto-fill","status":"publish","type":"post","link":"https:\/\/www.bemdesign.com\/wordpress\/2018\/01\/06\/css-grid-thoughts-on-when-to-use-auto-fill\/","title":{"rendered":"CSS Grid: Thoughts on when to use <code>auto-fill<\/code>"},"content":{"rendered":"<p><a href=\"https:\/\/www.sarasoueidan.com\/\" target=\"_blank\" rel=\"noopener\">Sara Soueiden<\/a> has an excellent <a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noopener\">CSS-Tricks<\/a> post on <a href=\"https:\/\/css-tricks.com\/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit\/\" target=\"_blank\" rel=\"noopener\">Auto-Sizing Columns in CSS Grid: `auto-fill` vs\u00a0`auto-fit`<\/a>\u00a0where she covers the difference between the two. At the end she asks the question of what the design case would be to use <code>auto-fill<\/code>\u00a0as, generally, <code>auto-fit<\/code>\u00a0seems to be a better solution. Thinking on it, I came up with one design situation where it actually would make sense to use `auto-fill.` As I commented on Sarah&#8217;s post:<\/p>\n<blockquote><p><code>auto-fill<\/code>\u00a0may make sense when building a layout template for dynamic content that is pulled in asynchronously and therefore may not appear in the view all at the same time. So basically when you have dynamic content getting loaded in and you don\u2019t want your grid layout to \u201cshift around\u201d as this content comes in.<\/p><\/blockquote>\n<p>For most design situations, <code>auto-fit<\/code> is a better catch-all solution. But in cases where dynamic content is being loaded into your template asynchronously and where it&#8217;s important not for the grid layout to &#8220;shift&#8221; during this time while the content is being loaded in, <code>auto-fill<\/code> may be the better solution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sara Soueiden has an excellent CSS-Tricks post on Auto-Sizing Columns in CSS Grid: `auto-fill` vs\u00a0`auto-fit`\u00a0where she covers the difference between the two. At the end she asks the question of what the design case would be to use auto-fill\u00a0as, generally, auto-fit\u00a0seems to be a better solution. Thinking on it, I came up with one design [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[37,44],"class_list":["post-605","post","type-post","status-publish","format-standard","hentry","category-design","tag-css","tag-design"],"_links":{"self":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":2,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/605\/revisions\/607"}],"wp:attachment":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}