Learn HTML, CSS, and JavaScript/

...

/

Responsive Design and Integration with CSS Grid

Responsive Design and Integration with CSS Grid

Learn to combine CSS Grid, media queries, and Flexbox for seamless, responsive designs.

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 and Flexbox

While CSS Grid ...