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:
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: Here is the basic example of auto-fill.
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.
Auto-fit: Auto-fit behaves the 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: Here is the basic example of auto-fit.
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. |
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 May, 2023
Like Article
Save Article