Difference between Auto-fit vs Auto-fill property in CSS grid

CSS Web Development Front End Technology

A responsive webpage is a necessary key point which has to be always kept in mind while developing a website. The grid module enables the developer to design webpages easily without using a lot of positioning, as the id module provides a grid type layout system in which there are rows and columns.

The auto-fill property

The auto-fill property is used to fill the rows with possible columns, the column which is added will occupy the space and the other column will be empty. The auto-fill property is an important property of the CSS grid and is mostly used so as to create a responsive layout without using media queries.

Syntax

Let’s look at the syntax of the auto-fill property.

:auto-fill;

Example

In the following program,

We first made a class “autofill” and then within the class we placed 3 items, each having different colors showcasing different boxes.
We set the “display property” to grid and assigned a height and width to the container. Later, auto-fill property is used to set its minimax value.
Finally, we gave dimensions to the 3 items that we made earlier.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using the auto-fill property</title>
   <style>
      .first-item {
         background-color: violet;
         border: solid black 4px ;
         max-width: 100%;
         min-height: 150px;
         height: auto;
      }
      .second-item {
         background-color: blue;
         border: solid black 5px;
         min-height: 150px;
         max-width: 100%;
         height: auto;
      }
      .third-item {
         background-color: maroon;
         border: solid black 5px;
         min-height: 150px;
         max-width: 100%;
         height: auto;
      }
      .autfill {
         margin-top: 4%;
         border: solid black 3px;
         width: 80vh;
         grid-template-columns: repeat(
         auto-fill, minmax(190px, 1fr));
         display: grid;
         gap: 5px;
      }
      .para{
         text-align: center;
      }
   </style>
</head>
<body>
   <div class="content">
      <div class="para"><h1>This is an example!!</h1></div>
      <div class="autfill">
         <div class="first-item"><h2 class="group">1</h1></div>
         <div class="second-item"><h2 class="group">2</h1></div>
         <div class="third-item"><h2 class="group">3</h1></div>
      </div>
   </div>
</body>
</html>

The auto-fit property

The “auto-fit” property is similar to the “auto-fill” property the only difference is that the property will expand its size by occupying the space available to it, depending up on the width of the device. If all the items of the grid are empty, then all of them are treated as a single track.

Example

In the following example, we set the property value to auto-fit. The auto-fit property will stretch itself, so as to fill the width of the entire row and fills any empty spaces by stretching itself.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using the auto-fit property</title>
   <style>
      #container {
         display:grid;
         width:100%;
         border:2px solid blue;
         grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
      }
      #first-item,#second-item,#third-item {
         height:100px;
         margin:3px 15px 15px 2px;
         background-color: blue;
      }
   </style>
</head>
<body>
   <div id="container">
      <div id="first-item">1</div>
      <div id="second-item">2</div>
      <div id="third-item">3</div>
   </div>
</body>
<html>

In the above example you can see that the items have filled the whole width of the row and the area where there is any space left.

The auto-fit vs the auto-fill property

The grid layout has different properties. Both auto-fit and auto-fill properties are part of the CSS grid module. The syntax of the grid layout is as follows −

.container-grid{
   display: grid;
}

Above is the syntax for the grid layout which sets the display property of a HTML element to grid layout.

Conclusion

The auto-fit and the auto-fill are both properties of the CSS-Grid and are used to create responsive layouts without using media query in which the auto-fill property will allow empty spaces in a row whereas in the auto-fit property the content will stretch itself that it can fill the row entirely. In this article, we covered the two properties auto-fill and the auto-fit which are used to create responsive layouts.