Search⌘ K
AI Features
Home
Courses
Learn HTML, CSS, and JavaScript

Responsive Design and Integration with CSS Grid

Explore integrating CSS Grid with media queries to build responsive, flexible web layouts. Learn to combine CSS Grid and Flexbox to design complex interfaces like card grids and the Holy Grail layout. Understand best practices to adapt designs for varying screen sizes and create user-friendly websites.

We'll cover the following...

In this lesson, we’ll focus on integrating CSS Grid into responsive design. We’ll learn how to use media queries with grid layouts, combine Grid with Flexbox for complex designs, and explore common grid layout patterns that adapt to different screen sizes.

Using media queries with grid

Media queries allow us to apply different styles based on the characteristics of the device, such as screen width. This is essential for creating responsive layouts.

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
 
@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
Creating responsive layout with media query and grid

In the above code:

  • Lines 1–5: By default, the grid has one column.

  • Lines 7–11: When the viewport width is at least 600px, the grid displays two columns.

  • Lines 13–17: At 900px and above, the grid expands to three columns. ... ...

Combining Grid