{"id":311528,"date":"2020-06-09T15:00:00","date_gmt":"2020-06-09T22:00:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=311528"},"modified":"2020-07-19T00:41:46","modified_gmt":"2020-07-19T07:41:46","slug":"cool-little-css-grid-tricks-for-your-blog","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/cool-little-css-grid-tricks-for-your-blog\/","title":{"rendered":"Cool Little CSS Grid Tricks for Your Blog"},"content":{"rendered":"\n<p>I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code <a href=\"https:\/\/codepen.io\/thebabydino\/details\/GRgYQge\" rel=\"noopener\">cool things<\/a> with more mathematical and, therefore, easier-to-understand features like transforms. However, other areas of CSS, such as layout, have remained a constant source of pain.<\/p>\n\n\n\n<p>This post is about a problem I encountered about a decade ago and, until recently, did not know how to solve in a smart way. Specifically, it&#8217;s about how I found a solution to a long-running problem using a modern CSS grid technique that, in the process, gave me even cooler results than I originally imagined.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"explanation\">Note that this is not a tutorial on how to best use CSS grid, but more of a walk through my own learning process.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-problem\">The problem<\/h3>\n\n\n<p>One of the first things I used to dump on that blog were random photos from the city, so I had this idea about having a grid of thumbnails with a fixed size. For a nicer look, I wanted this grid to be middle-aligned with respect to the paragraphs above and below it, but, at the same time, I wanted the thumbnails on the last row to be left-aligned with respect to the grid. Meanwhile, the width of the post (and the width of the grid within it) would depend on the viewport.<\/p>\n\n\n\n<figure><video src=\"https:\/\/videos.files.wordpress.com\/f24Y9Zob\/thumb_grid_prob_hd.mp4\" controls><\/figure>\n\n\n\n<p>The HTML looks something like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section class='post__content'>\n  &lt;p>&lt;!-- some text -->&lt;\/p>\n  &lt;div class='grid--thumbs'>\n    &lt;a href='full-size-image.jpg'>\n      &lt;img src='thumb-image.jpg' alt='image description'\/>\n    &lt;\/a>\n    &lt;!-- more such thumbnails -->\n  &lt;\/div>\n  &lt;p>&lt;!-- some more text -->&lt;\/p>\n&lt;\/section><\/code><\/pre>\n\n\n\n<p>It may seem simple, but it turned out to be one of the most difficult CSS problems I&#8217;ve ever encountered.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"bad-solutions\">Less than ideal solutions<\/h3>\n\n\n<p>These are things I have tried or seen suggested over the years, but that never really got me anywhere.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"bad-float\">Floating impossibility<\/h4>\n\n\n<p>Floats turned out to be a dead end because I couldn&#8217;t figure out how to make the grid be middle aligned this way.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid--thumbs { overflow: hidden; }\n\n.grid--thumbs a { float: left; }<\/code><\/pre>\n\n\n\n<p>The demo below shows the float attempt. Resize the embed to see how they behave at different viewport widths.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEbmLMa\" src=\"\/\/codepen.io\/anon\/embed\/ZEbmLMa?height=500&amp;theme-id=1&amp;slug-hash=ZEbmLMa&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEbmLMa\" title=\"CodePen Embed ZEbmLMa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"bad-inline-block\"><code>inline-block<\/code> madness<\/h4>\n\n\n<p>At first, this seemed like a better idea:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid--thumbs { text-align: center }\n\n.grid--thumbs a { display: inline-block }<\/code><\/pre>\n\n\n\n<p>Except it turned out it wasn&#8217;t:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjYeWao\" src=\"\/\/codepen.io\/anon\/embed\/JjYeWao?height=550&amp;theme-id=1&amp;slug-hash=JjYeWao&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjYeWao\" title=\"CodePen Embed JjYeWao\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The last row isn&#8217;t left aligned in this case.<\/p>\n\n\n\n<p>At a certain point, thanks to an accidental CSS auto-complete on CodePen, I found out about a property called <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/\">text-align-last<\/a><\/code>, which determines how the last line of a block is aligned.<\/p>\n\n\n\n<p>Unfortunately, setting <code>text-align-last: left<\/code> on the grid wasn&#8217;t the solution I was looking for either:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYpXWoN\" src=\"\/\/codepen.io\/anon\/embed\/LYpXWoN?height=550&amp;theme-id=1&amp;slug-hash=LYpXWoN&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYpXWoN\" title=\"CodePen Embed LYpXWoN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>At this point, I actually considered dropping the idea of a middle aligned grid. Could a combo of <code>text-align: justified<\/code> and <code>text-align-last: left<\/code> on the grid produce a better result?<\/p>\n\n\n\n<p>Well, turns out it doesn&#8217;t. That is, unless there&#8217;s only a thumbnail on the last row and the gaps between the columns aren&#8217;t too big. Resize the embed below to see what I mean.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWjJvWJ\" src=\"\/\/codepen.io\/anon\/embed\/QWjJvWJ?height=550&amp;theme-id=1&amp;slug-hash=QWjJvWJ&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWjJvWJ\" title=\"CodePen Embed QWjJvWJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is pretty much where I was at two years ago, after nine years of trying and failing to come up with a solution to this problem.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"bad-flex\">Messy flexbox hacks<\/h4>\n\n\n<p>A flexbox solution that seemed like it would work at first was to add an <code>::after<\/code> pseudo-element on the grid and set <code>flex: 1<\/code> on both the thumbnails and this pseudo-element:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code>.grid--thumbs {\n  display: flex;\n  flex-wrap: wrap;\n\t\n  a, &amp;::after { flex: 1; }\n\t\n  img { margin: auto; }\n\t\n  &amp;:after { content: 'AFTER'; }\n}<\/code><\/pre>\n\n\n\n<p>The demo below shows how this method works. I&#8217;ve given the thumbnails and the <code>::after<\/code> pseudo-element purple outlines to make it easier to see what is going on.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRpwmqQ\" src=\"\/\/codepen.io\/anon\/embed\/GRpwmqQ?height=550&amp;theme-id=1&amp;slug-hash=GRpwmqQ&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRpwmqQ\" title=\"CodePen Embed GRpwmqQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is not quite what I wanted because the grid of thumbnails is not middle-aligned. Thats said, it doesn&#8217;t look too bad&#8230; as long as the last row has exactly one item less image than the others. As soon as that changes, however, the layout breaks if it&#8217;s missing more items or none.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/screen_flex_after_issue.png?ssl=1\" alt=\"Screenshot collage. Shows how the layout breaks when the last row is not missing exactly one item to be full.\" data-recalc-dims=\"1\"\/><figcaption>Why the <code>::after<\/code> hack is not reliable.<\/figcaption><\/figure>\n\n\n\n<p>That was one hacky idea. Another is not to use a pseudo-element, but add as many empty divs after the thumbnails as there are columns that we&#8217;re expecting to have.<\/p>\n\n\n\n<p>The expected number of columns is something we should be able to approximate since the size of the thumbnails is fixed and we probably want to set a maximum width for the post since text that stretches across the width of a full screen can visually exhausting for eyes to read. Dividing the maximum width by the fixed thumbnail width should give us the maximum number of columns in this case.<\/p>\n\n\n\n<p>The first empty elements will take up the full width of the row that&#8217;s not completely filled with thumbnails, while the rest will spill into other rows. But since their <code>height<\/code> is zero, it won&#8217;t matter visually.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwvVqxv\" src=\"\/\/codepen.io\/anon\/embed\/VwvVqxv?height=550&amp;theme-id=1&amp;slug-hash=VwvVqxv&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwvVqxv\" title=\"CodePen Embed VwvVqxv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This kind of does the trick but, again, it&#8217;s hacky and still doesn&#8217;t produce the exact result I want since it sometimes ends up with big and kind of ugly-looking gaps between the columns.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"bad-grid\">A grid solution?<\/h4>\n\n\n<p>The grid layout has always sounded like the answer, given its name. The problem was that all examples I had seen by then were using a predefined number of columns and that doesn&#8217;t work for this particular pattern where the number of columns is determined by the viewport width.<\/p>\n\n\n\n<p>Last year, while coding a collection of one element, pure CSS background patterns, I had the idea of generating a bunch of media queries that would modify a CSS variable, <code>--n<\/code>, corresponding to the number of columns used to set <code>grid-template-columns<\/code>.<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code>$w: 13em;\n$h: 19em;\n$f: $h\/$w;\n$n: 7;\n$g: 1em;\n\n--h: #{$f*$w};\ndisplay: grid;\ngrid-template-columns: repeat(var(--n, #{$n}), var(--w, #{$w}));\ngrid-gap: $g;\nplace-content: center;\n\t\n@for $i from 1 to $n {\n  @media (max-width: ($n - $i + 1)*$w + ($n - $i + 2)*$g) {\n    --n: #{$n - $i}\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRRpzNX\" src=\"\/\/codepen.io\/anon\/embed\/GRRpzNX?height=600&amp;theme-id=1&amp;slug-hash=GRRpzNX&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRRpzNX\" title=\"CodePen Embed GRRpzNX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I was actually super proud of this idea at the time, even though I cringe looking back on it now. One media query for every number of columns possible is not exactly ideal, not to mention it doesn&#8217;t work so well when the grid width doesn&#8217;t equal the viewport width, but is still somewhat flexible and also depends on the width of its siblings.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"magic-solution\">A magic solution<\/h3>\n\n\n<p>I finally came across a better solution while working with CSS grid and failing to understand why the <code>repeat()<\/code> function wasn&#8217;t working in a particular situation. It was so frustrating and prompted me to go to MDN, where I happened to notice the <code><a href=\"https:\/\/css-tricks.com\/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit\/\">auto-fit<\/a><\/code> keyword and, while I didn&#8217;t understand the explanation, I had a hunch that it could help with <em>this<\/em> other problem, so I dropped everything else I was doing and gave it a try.<\/p>\n\n\n\n<p>Here&#8217;s what I got:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code>.grid--thumbs {\n  display: grid;\n  justify-content: center;\n  grid-gap: .25em;\n  grid-template-columns: repeat(auto-fit, 8em);\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYpQbQx\" src=\"\/\/codepen.io\/anon\/embed\/eYpQbQx?height=500&amp;theme-id=1&amp;slug-hash=eYpQbQx&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYpQbQx\" title=\"CodePen Embed eYpQbQx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I also discovered the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/minmax\" rel=\"noopener\"><code>minmax()<\/code><\/a> function, which can be used in place of fixed sizes on grid items. I still haven&#8217;t been able to understand exactly how <code>minmax()<\/code> works \u2014 and the more I play with it, the less I understand it \u2014 but what it looks like it does in this situation is create the grid then stretch its columns equally until they fill all of the available space:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code>grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYpbQgd\" src=\"\/\/codepen.io\/anon\/embed\/eYpbQgd?height=550&amp;theme-id=1&amp;slug-hash=eYpbQgd&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYpbQgd\" title=\"CodePen Embed eYpbQgd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Another cool thing we can do here is prevent the image from overflowing when it&#8217;s wider than the grid element. We can do this by replacing the minimum <code>8em<\/code> with <code>min(8em, 100%)<\/code> That essentially ensures that images will never exceed 100%, but never below 8em. Thanks to Chris for this suggestion!<\/p>\n\n\n\n<p class=\"explanation\">Note that the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/min\" rel=\"noopener\"><code>min()<\/code><\/a> function doesn&#8217;t work in pre-Chromium Edge!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEbVVpv\" src=\"\/\/codepen.io\/anon\/embed\/ZEbVVpv?height=550&amp;theme-id=1&amp;slug-hash=ZEbVVpv&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEbVVpv\" title=\"CodePen Embed ZEbVVpv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Keep in mind that this only produces a nice result if all of the images have the same aspect ratio \u2014 like the square images I&#8217;ve used here. For my blog, this was not an issue since all photos were taken with my Sony Ericsson W800i phone, and they all had the same aspect ratio. But if we were to drop images with different aspect ratios, the grid wouldn&#8217;t look as good anymore:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyYwazO\" src=\"\/\/codepen.io\/anon\/embed\/dyYwazO?height=650&amp;theme-id=1&amp;slug-hash=dyYwazO&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyYwazO\" title=\"CodePen Embed dyYwazO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can, of course, set the image <code>height<\/code> to a fixed value, but that distorts the images&#8230; unless we set <a href=\"https:\/\/css-tricks.com\/on-object-fit-and-object-position\/\"><code>object-fit<\/code><\/a> to <code>cover<\/code>, which solves our problem!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjYwzmL\" src=\"\/\/codepen.io\/anon\/embed\/JjYwzmL?height=450&amp;theme-id=1&amp;slug-hash=JjYwzmL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjYwzmL\" title=\"CodePen Embed JjYwzmL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Another idea would be to turn the first thumbnail into a sort of banner that spans all grid columns. The one problem is that we don&#8217;t know the number of columns because that depends on the viewport. But, there <em>is<\/em> a solution \u2014 we can set <code>grid-column-end<\/code> to <code>-1<\/code>!<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code>.grid--thumbs {\n  \/* same styles as before *\/\n\t\n  a:first-child {\n    grid-column: 1\/ -1;\n\t\t\n    img { height: 13em }\n  }\n}<\/code><\/pre>\n\n\n\n<p>The first image gets a bigger <code>height<\/code> than all the others.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYNbJJo\" src=\"\/\/codepen.io\/anon\/embed\/vYNbJJo?height=650&amp;theme-id=1&amp;slug-hash=vYNbJJo&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYNbJJo\" title=\"CodePen Embed vYNbJJo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Of course, if we wanted the image to span all columns except the last, one we&#8217;d set it to <code>-2<\/code> and so on&#8230; negative column indices are a thing!<\/p>\n\n\n\n<p><code>auto-fill<\/code> is another grid property keyword I noticed on MDN. The explanations for both are long walls of text without visuals, so I didn&#8217;t find them particularly useful. Even worse, replacing <code>auto-fit<\/code> with <code>auto-fill<\/code> in any of the grid demos above produces absolutely no difference. How they really work and how they differ still remains a mystery, even after checking out <a href=\"https:\/\/css-tricks.com\/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit\/#article-header-id-0\">articles<\/a> or toying with <a href=\"https:\/\/gridbyexample.com\/examples\/example37\/\" rel=\"noopener\">examples<\/a>.<\/p>\n\n\n\n<p>However, trying out different things and seeing what happens in various scenarios at one point led me to the conclusion that, if we&#8217;re using a <code>minmax()<\/code> column width and not a fixed one (like <code>8em<\/code>), then it&#8217;s probably better to use <code>auto-fill<\/code> instead of <code>auto-fit<\/code> because, the result looks better if we happen to only have a few images, as illustrated by the interactive demo below:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWjovRV\" src=\"\/\/codepen.io\/anon\/embed\/QWjovRV?height=650&amp;theme-id=1&amp;slug-hash=QWjovRV&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWjovRV\" title=\"CodePen Embed QWjovRV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I think what I personally like best is the initial idea of a thumbnail grid that&#8217;s middle-aligned and has a mostly fixed column width (but still uses <code>min(100%, 15em)<\/code> instead of just <code>15em<\/code> though). At the end of the day, it&#8217;s a matter of personal preference and what can be seen in the demo below just happens to look better to me:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLYPzgd\" src=\"\/\/codepen.io\/anon\/embed\/yLYPzgd?height=650&amp;theme-id=1&amp;slug-hash=yLYPzgd&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLYPzgd\" title=\"CodePen Embed yLYPzgd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I&#8217;m using <code>auto-fit<\/code> in this demo because it produces the same result as <code>auto-fill<\/code> and is one character shorter. However, what I didn&#8217;t understand when making this is that both keywords produce the same result because there are more items in the gallery than we need to fill a row.<\/p>\n\n\n\n<p>But once that changes, <code>auto-fit<\/code> and <code>auto-fill<\/code> produce different results, as illustrated below. You can change the <code>justify-content<\/code> value and the number of items placed on the grid:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOayvpb\" src=\"\/\/codepen.io\/anon\/embed\/gOayvpb?height=750&amp;theme-id=1&amp;slug-hash=gOayvpb&amp;default-tab=result\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOayvpb\" title=\"CodePen Embed gOayvpb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I&#8217;m not really sure which is the better choice. I guess this also depends on personal preference. Coupled with <code>justify-content: center<\/code>, <code>auto-fill<\/code> seems to be the more logical option, but, at the same time, <code>auto-fit<\/code> produces a better-looking result.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more mathematical and, therefore, easier-to-understand features like transforms. However, other areas of CSS, such as layout, have remained a constant source of pain. This post is [&hellip;]<\/p>\n","protected":false},"author":225572,"featured_media":312584,"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":[4],"tags":[686,688],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/auto-grid-image-gallery.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":373508,"url":"https:\/\/css-tricks.com\/a-pure-css-gallery-focus-effect-with-not\/","url_meta":{"origin":311528,"position":0},"title":"A Pure CSS Gallery Focus Effect with :not","date":"October 13, 2022","format":false,"excerpt":"Oftentimes in the past, I needed to figure out how to add styles to all elements inside the container but not the hovered one. Demo of the expected \"fade-out\" effect on siblings to let users \"focus\" on a particular element. This effect requires selecting the siblings of a hovered element.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/pure-css-gallery-effect-with-not-header.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302363,"url":"https:\/\/css-tricks.com\/full-width-elements-by-using-edge-to-edge-grid\/","url_meta":{"origin":311528,"position":1},"title":"Full-Width Elements By Using Edge-to-Edge Grid","date":"February 6, 2020","format":false,"excerpt":"If you have a limited-width container, say a centered column of text, \"breaking out\" of that to make a full-width element involves trickery. Perhaps the best trick is the one with left relative positioning and a negative left viewport-based margin. While it has its caveats (e.g. requiring hidden overflow on\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/grid-sketch-r3.jpg?fit=1200%2C675&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":311528,"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 &quot;Article&quot;","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":322969,"url":"https:\/\/css-tricks.com\/layoutit-grid-learning-css-grid-visually-with-a-generator\/","url_meta":{"origin":311528,"position":3},"title":"Layoutit Grid: Learning CSS Grid Visually With a Generator","date":"October 15, 2020","format":false,"excerpt":"Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add or remove track lines and drag them around to change the sizing \u2014 and you get to see the CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/layoutit-grid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353473,"url":"https:\/\/css-tricks.com\/expandable-sections-within-a-css-grid\/","url_meta":{"origin":311528,"position":4},"title":"Expandable Sections Within a CSS Grid","date":"October 15, 2021","format":false,"excerpt":"I love CSS Grid. I love how, with just a few lines of code, we can achieve fully responsive grid layouts, often without any media queries at all. I\u2019m quite comfortable wrangling CSS Grid to produce interesting layouts, while keeping the HTML markup clean and simple. But recently, I was\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/grid-expanded.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325791,"url":"https:\/\/css-tricks.com\/grid-auto-flow-css-grid-flex-direction-flexbox\/","url_meta":{"origin":311528,"position":5},"title":"grid-auto-flow : CSS Grid :: flex-direction : Flexbox","date":"November 18, 2020","format":false,"excerpt":"When setting a parent element to display: flex, its child elements align left-to-right like this: CodePen Embed Fallback Now, one of the neat things we can do with flexbox is change the direction so that child elements are stacked vertically on top of each other in a column. We can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/auto-grid-image-gallery.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311528"}],"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\/225572"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=311528"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311528\/revisions"}],"predecessor-version":[{"id":317432,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311528\/revisions\/317432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/312584"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=311528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=311528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=311528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}