Responsive Grid with Media Queries

Media queries apply CSS rules only when certain conditions are met (e.g., screen width). Combined with Grid, they create fully responsive layouts.

Breakpoints

Name	Width
Mobile	< 640px
Tablet	640px – 1024px
Desktop	> 1024px

Mobile-First Approach

Write styles for mobile first, then add @media (min-width: ...) to enhance for larger screens.

Example

.cards {
  display: grid;
  grid-template-columns: 1fr;    /* mobile: 1 column */
  gap: 16px;
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: 1fr 1fr;  /* tablet: 2 columns */
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);  /* desktop: 3 columns */
  }
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned