How to Create a Responsive CSS Grid Layout ?
Last Updated :
15 Nov, 2024
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.
HTML
<!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>
Output
Output gif
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.
HTML
<!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>
Output
Output gif3. 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.
HTML
<!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>
Output
Output gif
Similar Reads
How to Create a Responsive Image Grid using CSS? A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr
3 min read
How to Create a 4-Column Layout Grid with CSS? We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c
3 min read
How to Create a 3-Column Layout Grid with CSS? Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as
3 min read
How to Create a 2-Column Layout Grid with CSS? Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or
4 min read
How to Create Dynamic Grid Layout using CSS? A dynamic grid layout using CSS can help us to build responsive and flexible web designs. In this article, we are going to learn about different approaches to achieving dynamic grid layouts, with their syntax, and example code for each method. A dynamic grid layout adjusts based on the content and s
3 min read