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

How can I make my grid layout adapt to different screen sizes without media queries?

Asked on Nov 24, 2025

Answer

You can make a grid layout adapt to different screen sizes using CSS Grid's auto-fit and auto-fill properties, which allow the grid to automatically adjust the number of columns based on the available space.

<!-- 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 the grid-template-columns property allows the grid to create as many columns as will fit into the container, each with a minimum width of 150px.
The "minmax(150px, 1fr)" function sets a minimum column width of 150px and allows columns to expand to fill the available space.
This approach eliminates the need for media queries by making the grid responsive to the container's width.
Ensure that the container has a defined width or is within a parent element that controls its size.

✅ Answered with CSS best practices.

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

How can I make my grid layout adapt to different screen sizes without media queries?

Asked on Nov 24, 2025

Answer

The Q&A Network