April 2026

CSS Grid Auto-Fit vs Auto-Fill: What Actually Changes in Your Layout? If you have ever used repeat() in CSS Grid, you have probably stumbled on two confusingly similar keywords: auto-fit and auto-fill. They sound alike, they look alike in most situations, and yet they produce very different results when your container has extra space. In this post, we will break down exactly how each keyword works, show you side-by-side behavior comparisons, and give you ready-to-use code snippets for common patterns like card grids and image galleries. The Core Difference in One Sentence auto-fill creates as many column tracks as possible to fill the container, even if some tracks end up empty. auto-fit does the same thing but then collapses those empty tracks to zero, letting the existing items stretch to fill the remaining space. That is literally the only difference. But it has a big visual impact. Quick Comparison Table Feature auto-fill auto-fit Creates tracks to fill space Yes Yes Empty tracks remain in the grid Yes (tracks stay at their defined size) No (empty tracks collapse to 0) Items stretch when extra space exists No, space is reserved by empty tracks Yes, items expand to fill the row Visible difference with few items Items stay at minimum size, gaps appear Items grow to consume available width Visible difference when row is full None None The key takeaway: the difference only shows up when the row is wide enough to hold more columns than you have items. When the grid row is completely filled with items, both keywords produce identical results. How auto-fill Works When you write: .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } The browser calculates how many 200px-wide columns can fit inside the container. It then creates that many column tracks, whether or not you have enough grid items to occupy them all. What happens visually: If you have 3 items but the container can fit 5 columns, the browser creates 5 column tracks. The 2 extra tracks are empty but still take up space. Your 3 items sit at their minimum size (200px in this case) and the remaining space is consumed by invisible empty columns. How auto-fit Works Now change one word: .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } The browser still calculates how many columns could fit. It still creates those tracks initially. But then it collapses every empty track down to zero width. The freed-up space is redistributed among the tracks that contain items. What happens visually: If you have 3 items but the container can fit 5 columns, those 2 empty tracks collapse. Your 3 items expand beyond 200px, sharing the full container width equally. The items grow thanks to the 1fr maximum in the minmax() function. Visual Behavior Breakdown To make this concrete, imagine a container that is 1200px wide with a minmax(200px, 1fr) column definition and no gap for simplicity. Scenario: 3 items in a 1200px container Keyword Tracks Created Empty Tracks Item Width auto-fill 6 (each 200px) 3 (remain at 200px) 200px each auto-fit 6 initially, then 3 collapse 0 (collapsed to 0px) 400px each With auto-fill, the three items cluster on the left at 200px each, and 600px of space sits empty on the right (occupied by invisible tracks). With auto-fit, each item stretches to 400px, filling the entire container. Scenario: 6 items in the same 1200px container Both auto-fill and auto-fit produce exactly the same layout: six 200px columns filling the row. No empty tracks exist, so there is nothing to collapse. When to Use auto-fill Use auto-fill when you want the grid to maintain a consistent column size regardless of how many items exist. This is useful when: You are building a layout where items should always be a predictable width You plan to dynamically add items and want the grid structure to remain stable You prefer items aligned to the left (or start) rather than stretched across the full width You are working with content management systems where the number of items changes frequently Practical Example: Product Listing Grid .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; padding: 24px; } .product-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; } If you have only 2 product cards in a wide viewport, they stay at a reasonable size rather than stretching uncomfortably wide. New products added later will slot into the pre-existing grid structure seamlessly. When to Use auto-fit Use auto-fit when you want items to expand and use all available space. This works best when: You have a small or variable number of items and want them to look balanced You are building hero sections, feature grids, or gallery layouts where stretching looks good You want the layout to feel “full” regardless of how many items you have You are creating responsive card layouts that should always span the full width Practical Example: Image Gallery .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } .gallery img { width: 100%; height: 250px; object-fit: cover; border-radius: 4px; } Whether you have 2 images or 20, the gallery always fills the container edge to edge. On smaller screens, the columns naturally wrap as the container width shrinks below the 300px minimum. Combining With minmax() Is Essential Both auto-fill and auto-fit are almost always used with the minmax() function. Here is why: The minimum value (e.g., 200px) sets the smallest a column can be. This is what the browser uses to calculate how many columns fit. The maximum value (typically 1fr) determines how much columns can grow. Without 1fr as the max, auto-fit cannot stretch items to fill space. If you use a fixed max like minmax(200px, 250px), auto-fit and auto-fill will behave more similarly because items cannot grow beyond 250px regardless of collapsed tracks. Real-World Code: Responsive Card Grid Here is a complete, production-ready card grid component using auto-fit: <div class=”card-grid”> <div class=”card”> <h3>Card Title</h3> <p>Card description goes here.</p> </div> <div class=”card”> <h3>Card