How to Create a Responsive CSS Grid Layout ?
Here are different ways to create a responsive grid layout with CSS.
1. Using auto-fill Property
This method can be used CSS Grid for a responsive layout. The grid-template-columns property adjusts columns based on space, keeping a minimum width of 200 pixels. Gaps between items are set with grid-gap. This approach ensures a flexible design that adapts to different screen sizes, ideal for responsive web development.
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
grid-gap: 10px
}
.grid > div {
font-size: 20px;
padding: 1rem;
color: yellow;
text-align: center;
background: red;
}
</style>
</head>
<body>
<div class="grid">
<div> Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div>Div 7</div>
<div>Div 8</div>
</div>
</body>
</html>
<html><head> <style> .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 10px } .grid > div { font-size: 20px; padding: 1rem; color: yellow; text-align: center; background: red; } </style></head><body> <div class="grid"> <div> Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> <div>Div 8</div> </div></body></html>Output
2. Using auto-fill and auto-fit Properties
This approach provides flexibility in creating responsive grid layouts, allowing developers to choose between filling the space with fixed-width columns (auto-fill) or adjusting column widths to fit the container (auto-fit). The .auto-fill and .auto-fit classes are used to control the behavior of the grid columns. The .auto-fill class creates as many columns as possible with a minimum width of 200 pixels, while .auto-fit ensures that the columns fit snugly within the container, expanding or contracting as needed.
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
margin: 8px;
grid-gap: 10px
}
.grid > div {
font-size: 20px;
padding: 1rem;
color: yellow;
text-align: center;
background: red;
}
.auto-fit {
grid-template-columns: repeat(auto-fit,
minmax(200px, 1fr));
}
.auto-fill {
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
}
</style>
</head>
<body>
<div class="grid auto-fill">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="grid auto-fit">
<div>Div 1</div>
<div>Div 2</div>
</div>
</body>
</html>
<html><head> <style> .grid { display: grid; margin: 8px; grid-gap: 10px } .grid > div { font-size: 20px; padding: 1rem; color: yellow; text-align: center; background: red; } .auto-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .auto-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } </style></head><body> <div class="grid auto-fill"> <div>Div 1</div> <div>Div 2</div> </div> <div class="grid auto-fit"> <div>Div 1</div> <div>Div 2</div> </div></body></html>Output
3. Using Media Query
This method uses media queries to create a responsive webpage layout. The .wrapper class defines the grid container with areas for the header, sidebar, content, and footer. Layout changes based on screen width, ensuring a flexible design that adapts to different sizes while maintaining structure and styling for each area.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
.wrapper {
background-color: #eeeeee;
color: #444;
padding: 10px;
margin: auto;
display: grid;
grid-gap: 1em;
grid-template-areas:
"header" "sidebar" "content" "footer";
}
@media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 20% auto;
grid-template-areas:
"header header" "sidebar content" "footer footer";
}
}
@media only screen and (min-width: 600px) {
.wrapper {
grid-gap: 20px;
grid-template-columns: 120px auto;
grid-template-areas:
"header header" "sidebar content" "footer footer";
max-width: 600px;
}
}
.box {
background-color: #444;
color: #ffffff;
border-radius: 5px;
padding: 10px;
font-size: 20px;
}
.header,
.footer {
background-color: blue;
}
.sidebar {
background-color: #ccc;
color: #444;
}
.content {
background: rgb(16, 160, 179);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">
Content
</div>
<div class="box footer">Footer</div>
</div>
</body>
</html>
<html><head> <style> body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .footer { grid-area: footer; } .wrapper { background-color: #eeeeee; color: #444; padding: 10px; margin: auto; display: grid; grid-gap: 1em; grid-template-areas: "header" "sidebar" "content" "footer"; } @media only screen and (min-width: 500px) { .wrapper { grid-template-columns: 20% auto; grid-template-areas: "header header" "sidebar content" "footer footer"; } } @media only screen and (min-width: 600px) { .wrapper { grid-gap: 20px; grid-template-columns: 120px auto; grid-template-areas: "header header" "sidebar content" "footer footer"; max-width: 600px; } } .box { background-color: #444; color: #ffffff; border-radius: 5px; padding: 10px; font-size: 20px; } .header, .footer { background-color: blue; } .sidebar { background-color: #ccc; color: #444; } .content { background: rgb(16, 160, 179); } </style></head><body> <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content"> Content </div> <div class="box footer">Footer</div> </div></body></html>Output
