CSS Responsive Grid
A responsive Grid automatically adjusts the number and size of columns according to the available screen width.
This allows the same Grid layout to work properly on desktops, tablets, and mobile devices.
What is a Responsive Grid?
A responsive Grid changes its layout based on the available screen size.
For example, a desktop can display three columns, a tablet can display two columns, and a mobile phone can display one column.
Basic Responsive Grid
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
@media (max-width: 991px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.container {
grid-template-columns: 1fr;
}
}On large screens, the Grid contains 3 columns.
At a maximum width of 991px, the Grid changes to 2 columns.
At a maximum width of 576px, the Grid changes to 1 column.
Responsive Grid Diagram
Desktop
3 columns
Tablet
2 columns
Mobile
1 column
Using Media Queries
Media queries allow CSS Grid to change its structure at specific screen widths.
@media (max-width: 991px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}This rule is applied when the screen width becomes 991px or smaller.
The Grid changes to two equal columns.
Responsive Grid with minmax()
The minmax() function allows a Grid column to have a minimum and maximum size.
.container {
display: grid;
grid-template-columns:
repeat(3, minmax(200px, 1fr));
gap: 15px;
}Each column has a minimum width of 200px.
The columns can grow up to 1fr of the available space.
Responsive Grid with auto-fit
.container {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}auto-fit automatically fits as many columns as possible into the available width.
When the screen becomes smaller, the number of columns automatically decreases.
Responsive Grid with auto-fill
.container {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}auto-fill creates as many possible Grid tracks based on the available space and minimum column size.
Practical Responsive Card Layout
.course-container {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.course-card {
padding: 20px;
border: 1px solid #ddd;
}The Grid automatically creates as many columns as can fit.
Each card has a minimum width of 220px.
This technique is useful for course cards, product cards, portfolio items, and dashboards.
Output
The cards automatically rearrange into fewer columns when the available screen width becomes smaller.
Important Responsive Grid Techniques
Media Queries
Change the Grid structure at specific screen widths.
minmax()
Defines minimum and maximum sizes for Grid tracks.
auto-fit
Automatically fits available Grid columns into the container.
auto-fill
Automatically creates possible Grid tracks based on available space.
fr Unit
Divides available Grid space into flexible fractions.
Flexible Layout
Allows the same layout to work across different screen sizes.
Real-World Uses
- Course cards
- Product grids
- Portfolio layouts
- Image galleries
- Admin dashboards
- Blog cards
Summary
CSS Responsive Grid allows a layout to adapt automatically to different screen sizes. Media queries can change the number of columns at specific breakpoints, while minmax(), auto-fit, and auto-fill can create flexible Grid layouts. Responsive Grid is especially useful for cards, dashboards, galleries, and modern website layouts.