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...