Auto-Fit vs Auto-Fill Property in CSS Grid

17 Nov, 2021
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:
grid-template-columns
fr and repeat()unit
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
prachisoda1234
CSS-Properties
CSS-Questions
CSS
Difference Between
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
Class method vs Static method in Python
Difference between BFS and DFS
Difference between var, let and const keywords in JavaScript
Difference Between Method Overloading and Method Overriding in Java
Differences between JDK, JRE and JVM