Ask any question about CSS here... and get an instant response.

How can I make a CSS grid layout adjust to different screen sizes without media queries?

Asked on Oct 10, 2025

Answer

To create a CSS grid layout that adjusts to different screen sizes without using media queries, you can use the `repeat()` function with the `auto-fit` or `auto-fill` keywords in combination with the `minmax()` function. This approach allows the grid to automatically adjust the number of columns based on the container's width.

<!-- BEGIN COPY / PASTE -->
    <div class="grid-container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
    </div>

    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

The `auto-fit` keyword in `grid-template-columns` automatically fits as many columns as possible into the container.
The `minmax(150px, 1fr)` function ensures each column is at least 150px wide and can grow to fill the available space.
This approach creates a responsive grid without needing media queries, as it adapts to the container's size.
Adjust the `minmax()` values to control the minimum column width and flexibility.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I make a CSS grid layout adjust to different screen sizes without media queries?

Asked on Oct 10, 2025

Answer

The Q&A Network