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

Why is my grid layout not aligning items as expected when I specify different grid-template-columns?

Asked on Dec 15, 2025

Answer

When your grid layout isn't aligning items as expected, it often relates to how the grid-template-columns property is defined and how items are placed within the grid. Let's explore a basic example to ensure proper alignment.

<!-- BEGIN COPY / PASTE -->
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
      <div style="background-color: lightblue;">Item 1</div>
      <div style="background-color: lightcoral;">Item 2</div>
      <div style="background-color: lightgreen;">Item 3</div>
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

Ensure that the number of columns specified matches the number of items you expect to align in each row.
Use "repeat()" to simplify column definitions, especially for equal-width columns.
Check for any conflicting CSS rules that might override your grid settings, such as specific widths or margins on grid items.
Consider using "fr" units for flexible layouts, allowing columns to adjust based on available space.

✅ Answered with CSS best practices.

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

Why is my grid layout not aligning items as expected when I specify different grid-template-columns?

Asked on Dec 15, 2025

Answer

The Q&A Network