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-fitThe 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.
.png)