The grid layout is essential for a web page to keep function and container as per requirement. We can make a responsive page using a CSS grid layout. CSS grid responsiveness helps create containers for all types of screen devices, from large to small.
Examples
The provided instances demonstrate the responsiveness of the CSS grid to various containers and elements.
Example 1
The illustration demonstrates a solitary grid pertaining to the div element, indicating the minimum screen width. Grid tags can be positioned at the center of various screen devices.
<!DOCTYPE html>
<html>
<head>
<title> CSS Grid Responsive </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
border : 2px solid black;
}
.good_main {
max-width: 1200px;
margin: auto;
display: grid;
gap: 0.5rem;
}
.class2{
background-color: navy;
color: white;
padding: 0.5rem;
height: 1rem;
}
html { font-size: 14px; }
body { padding: 0.5rem; }
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Grid Responsive
</h3>
</div>
<div class = "good_main">
<div class = "class2"> One </div>
<div class = "class2"> Two </div>
<div class = "class2"> Three </div>
<div class = "class2"> Four </div>
<div class = "class2"> Five </div>
<div class = "class2"> Six </div>
<div class = "class2"> Seven </div>
<div class = "class2"> Eight </div>
</div>
</body>
</html>
Output
The result displays the CSS grid layout for a mobile-friendly webpage.
Example 2:
The illustration presents two layouts for the div element designed for the smallest screen width. Both layouts are visible for screen widths above a certain threshold, while only one layout is shown when the screen width falls below 200px. This is achieved by employing the grid-template-columns attribute within a media query that targets the minimum width.
<!DOCTYPE html>
<html>
<head>
<title> CSS Grid Responsive </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
border : 2px solid black;
}
.good_main {
max-width: 1200px;
margin: auto;
display: grid;
gap: 0.5rem;
}
.class2{
background-color: navy;
color: white;
padding: 0.5rem;
height: 1rem;
}
@media (min-width: 200px) {
.good_main { grid-template-columns: repeat(2, 1fr); }
}
html { font-size: 14px; }
body { padding: 0.5rem; }
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Grid Responsive
</h3>
</div>
<div class = "good_main">
<div class = "class2"> One </div>
<div class = "class2"> Two </div>
<div class = "class2"> Three </div>
<div class = "class2"> Four </div>
<div class = "class2"> Five </div>
<div class = "class2"> Six </div>
<div class = "class2"> Seven </div>
<div class = "class2"> Eight </div>
</div>
</body>
</html>
Output
The result displays the CSS grid layout for a mobile-friendly webpage.
Example 3:
The demonstration illustrates four grid layouts for the div element designed for the smallest screen width. Two grids are visible for wider screen widths, while a lone grid is shown when the screen width falls below 200px. The CSS employs the grid-template-column attributes within the media query.
<!DOCTYPE html>
<html>
<head>
<title> CSS Grid Responsive </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
border : 2px solid black;
}
.good_main {
max-width: 1200px;
margin: auto;
display: grid;
gap: 0.5rem;
}
.class2{
background-color: navy;
color: white;
padding: 0.5rem;
height: 1rem;
}
@media (min-width: 200px) {
.good_main { grid-template-columns: repeat(4, 1fr); }
}
html { font-size: 14px; }
body { padding: 0.5rem; }
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Grid Responsive
</h3>
</div>
<div class = "good_main">
<div class = "class2"> One </div>
<div class = "class2"> Two </div>
<div class = "class2"> Three </div>
<div class = "class2"> Four </div>
<div class = "class2"> Five </div>
<div class = "class2"> Six </div>
<div class = "class2"> Seven </div>
<div class = "class2"> Eight </div>
</div>
</body>
</html>
Output
The result displays the CSS grid layout for a responsive webpage.
Example 4:
The illustration presents two grid layouts associated with the div element designed for the narrowest screen width. The depiction showcases a dual-grid layout for screen widths exceeding 200px, transitioning to a single-grid layout for screens narrower than 200px. To achieve responsiveness, CSS employs the grid-template-columns attribute along with the auto display setting.
<!DOCTYPE html>
<html>
<head>
<title> CSS Grid Responsive </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
border : 2px solid black;
}
.good_main {
max-width: 1200px;
margin: auto;
display: grid;
gap: 0.5rem;
}
.class2{
background-color: navy;
color: white;
padding: 0.5rem;
height: 1rem;
}
@media (min-width: 200px) {
.good_main { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
html { font-size: 14px; }
body { padding: 0.5rem; }
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Grid Responsive with auto fit value
</h3>
</div>
<div class = "good_main">
<div class = "class2"> One </div>
<div class = "class2"> Two </div>
<div class = "class2"> Three </div>
<div class = "class2"> Four </div>
<div class = "class2"> Five </div>
<div class = "class2"> Six </div>
<div class = "class2"> Seven </div>
<div class = "class2"> Eight </div>
</div>
</body>
</html>
Output
The result displays the CSS grid layout for a responsive webpage.
Example 5:
The illustration displays two grids representing the div element for the smallest screen width. In the CSS, the grid-template-columns property incorporates auto-fill values to ensure responsiveness.
<!DOCTYPE html>
<html>
<head>
<title> CSS Grid Responsive </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
border : 2px solid black;
}
.good_main {
max-width: 1200px;
margin: auto;
display: grid;
gap: 0.5rem;
}
.class2{
background-color: navy;
color: white;
padding: 0.5rem;
height: 1rem;
}
@media (min-width: 200px) {
.good_main { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
html { font-size: 14px; }
body { padding: 0.5rem; }
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Grid Responsive with auto-fill value
</h3>
</div>
<div class = "good_main">
<div class = "class2"> One </div>
<div class = "class2"> Two </div>
<div class = "class2"> Three </div>
<div class = "class2"> Four </div>
<div class = "class2"> Five </div>
<div class = "class2"> Six </div>
<div class = "class2"> Seven </div>
<div class = "class2"> Eight </div>
</div>
</body>
</html>
Output
The result displays the CSS grid layout for a mobile-friendly webpage.
Conclusion
The CSS grid layout targets the arrangement of different div elements within a grid. It plays a crucial role in presenting diverse features based on the webpage requirements and user interactions. This grid system provides a straightforward and uncomplicated method for developers to partition the webpage area effectively. By leveraging this system, the space is optimally utilized, enhancing user engagement on the page.