Responsive with grid

Strategies to achieve layouts that automatically adapt to different screen sizes.

Media queries: allow applying conditional CSS styles depending on the screen width.
@media (max-width: ...): applies when the screen width is less than or equal to the specified value. Commonly used to adjust layouts on small screens (e.g., mobile).
@media (min-width: ...): applies when the screen width is greater than or equal to the specified value. Typically used in mobile-first approaches, where the design is first defined for mobile and then extended for larger screens.
Use of auto-fit and minmax() to create fluid grids that adapt without media queries, generating as many columns as can fit in the container.
Use of auto-fill: similar to auto-fit, but keeps empty spaces reserved for columns that do not get filled.
Combination with grid-template-areas: allows easy reorganization of the layout based on breakpoints by rearranging entire blocks.
Relative units (fr, %, auto, min-content, max-content) promote flexible behavior on small screens.
Modern properties like clamp() help set a minimum, ideal, and maximum width without the need for multiple media queries.

Example

Move the container width control and switch techniques with the selector. auto-fit needs no media queries, while the other two options change the structure at a breakpoint.

Select technique:

auto-fitmedia queriesgrid-template-areas

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.