Auto-Fit vs Auto-Fill Property in CSS Grid
One of the most important features in CSS Grid is that we can create a responsive layout without using a media query. We don’t need to write a media query for each viewport rather it can be adjusted by using some of the properties of CSS-Grid. It can be adjusted by simply using grid-template-columns property, repeat() function along with auto-fit and auto-fill keywords.
Pre-requisites:
1. Auto-fill: The auto-fill property fills the rows with as many columns as it can fit. The newly added column may be empty but it will still occupy a space in the given row. It is an important property in the CSS grid that make a responsive layout without writing a media query for each grid.
Syntax:
:auto-fill
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > * { margin: 0; padding: 0; box-sizing: border-box; } .item1 { background-color: aqua; border: 1px solid black; border-radius: 3px; max-width: 100%; min-height: 250px; height: auto; } .item2 { background-color: pink; border: 1px solid black; max-width: 100%; border-radius: 3px; min-height: 250px; height: auto; } .set { text-align: center; margin-top: 10%; } .item3 { background-color: green; border: 1px solid black; max-width: 100%; border-radius: 3px; min-height: 250px; height: auto; } .item4 { background-color: springgreen; border: 1px solid black; border-radius: 3px; max-width: 100%; min-height: 250px; height: auto; } body { height: 100vh; place-items: center; padding: 100px 0; } .autofill { width: 90vw; margin-top: 4%; border-radius: 3px; border: 1px solid rgb(22, 3, 3); display: grid; /* Use display property as grid*/ gap: 5px; grid-template-columns: repeat( auto-fill, minmax(200px, 1fr)); } </ style > </ head > < body > < div class = "autofill" > < div class = "item1" > < h1 class = "set" >1</ h1 > </ div > < div class = "item2" > < h1 class = "set" >2</ h1 > </ div > < div class = "item3" > < h1 class = "set" >3</ h1 > </ div > < div class = "item4" > < h1 class = "set" >4</ h1 > </ div > </ div > </ body > </ html > |
Output:

auto-fill property fig-1
As we can see in figure(fig-1) auto-fill automatically gets resized and leave the available space for the addition of new items in it.
2. Auto-fit: Auto-fit behaves same as auto-fill but The auto-fit property fills the currently available space by expanding its size to take up available space according to device width. If all grid items are empty it is treated as a single track of size 0px.
For the purpose of finding the number of auto-repeated tracks, we need to keep the track size to a specified value (e.g., 1px), to avoid division by zero.
Syntax:
:auto-fit
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > * { margin: 0; padding: 0; box-sizing: border-box; } .item1 { background-color: aqua; border: 1px solid black; border-radius: 3px; max-width: 100%; min-height: 250px; height: auto; } .item2 { background-color: pink; border: 1px solid black; max-width: 100%; border-radius: 3px; min-height: 250px; height: auto; } .set { text-align: center; margin-top: 10%; } .item3 { background-color: green; border: 1px solid black; max-width: 100%; border-radius: 3px; min-height: 250px; height: auto; } .item4 { background-color: springgreen; border: 1px solid black; border-radius: 3px; max-width: 100%; min-height: 250px; height: auto; } body { height: 100vh; place-items: center; padding: 100px 0; } .auto-fit { width: 90vw; margin-top: 4%; border-radius: 3px; border: 1px solid rgb(22, 3, 3); display: grid; /* Use display property as grid*/ gap: 5px; grid-template-columns: repeat( auto-fit, minmax(200px, 1fr)); } </ style > < title >Document</ title > </ head > < body > < div class = "auto-fit" > < div class = "item1" > < h1 class = "set" >1</ h1 > </ div > < div class = "item2" > < h1 class = "set" >2</ h1 > </ div > < div class = "item3" > < h1 class = "set" >3</ h1 > </ div > < div class = "item4" > < h1 class = "set" >4</ h1 > </ div > </ div > </ body > </ html > |
Output:

auto-fit property (fig-2)
The difference between Auto-fill and Auto-fit is given below:
Auto-fill | Auto-fit |
The browser will allow empty columns to occupy space in a row. | The content will stretch to fill the entire row width. |
Grid layout remains fixed with or without items. | Grid layout is not fixed ,the content stretch to fit entire width. |
Shifting of items in a grid is possible as there are vacant space in a row. | Shifting of items in a grid is not possible. |
Please Login to comment...