How to Fix a Broken Page Layout After Adding CSS Grid

Your page was working fine. Then you added CSS grid to modernise the layout, refreshed the browser, and everything fell apart. Sections overlap, columns stretch far too wide, the sidebar lands at the bottom, and a gap appears where no gap should be. It feels as if adding one powerful feature broke ten things at once.

Grid rarely breaks a layout at random. What usually happens is that grid changes how sizes, placement, and overflow work, and old assumptions from floats, flexbox, or fixed widths suddenly collide with the new rules. The encouraging part is that grid problems are very visual and very systematic. Work through them in the right order and the layout settles quickly.

Quick Answer

Fix a layout broken by CSS grid by checking four things in order: that display: grid is on the correct parent of the items, that your grid-template-columns values add up to a sensible width using fr and minmax(0, 1fr), that no item is placed outside the tracks you defined or given a fixed width that overflows, and that images and content inside cells have max-width: 100% and can shrink. Use your browser’s grid overlay to see the tracks while you repair each issue.

Why Adding Grid Changes Everything at Once

Grid is a two-dimensional system. The moment you set display: grid on a container, its direct children become grid items and start following grid placement and sizing rules instead of the normal flow behaviour they had before. Margins, widths, and floats that behaved one way in a block layout can behave very differently as grid items.

Three changes surprise people most. Grid items stretch to fill their track by default, content can force a track wider than intended because 1fr tracks respect a content-based minimum, and items are placed in document order, so sections appear in unexpected positions until you place them deliberately.

Grid and your earlier rules are now sharing control of the same elements, and most repairs below are about removing that conflict.

Start with the Grid Overlay

Before changing any code, turn on the grid overlay in your browser’s developer tools. Select the grid container in the elements panel and click the grid badge next to it. The browser draws your tracks, gaps, and line numbers directly over the page.

1. Compare the number of visible columns with the number you think you defined.
2. Look for tracks that are far wider than the others, which signals a sizing or content problem.
3. Check whether any item sits outside the drawn tracks or spans more cells than expected.
4. Note which items overlap, because overlap in the overlay means a placement conflict in your code.

With the overlay on, every change you make gives instant visual feedback, and guessing disappears from the process. The feature tour for CSS grid layout including tracks, lines, and placement on MDN explains the vocabulary the overlay uses, such as lines, tracks, and areas.

Repair 1: Put Grid on the Right Container

The most basic failure is applying display: grid to the wrong element. Grid only controls its direct children. If an extra wrapper div sits between your container and your sections, the sections are not grid items at all, and the layout follows the wrapper’s single cell instead.

Make sure the elements you want in columns are immediate children of the grid container. If a framework forces a wrapper, apply grid to that wrapper or restructure the markup. Also check for an old display: flex or float rule competing on the same element, since the winner is decided by specificity and order, not by which rule you edited last.

Repair 2: Fix Track Sizes That Overflow or Collapse

Track definitions are the second place to look. A definition such as grid-template-columns: 300px 600px 300px demands 1,200 pixels plus gaps, so on any smaller screen the grid simply overflows its container and pushes the page sideways. Replace rigid pixel tracks with flexible fractions wherever the layout should adapt:

• Use grid-template-columns: 1fr 2fr 1fr for proportional columns that share the available space.
• Keep a fixed sidebar only where it truly needs one, for example grid-template-columns: 260px 1fr, and switch to a single column with a media query on small screens.
• Write flexible tracks as minmax(0, 1fr) instead of plain 1fr when a track contains long text, code, or media, so the track is allowed to shrink below its content size.
• Account for the gap in your maths. Gaps are added between tracks, so three 33 percent columns plus gaps will overflow; fractions handle this automatically, percentages do not.

The minmax(0, 1fr) detail fixes a famous mystery: a grid column that refuses to shrink even though it is set to 1fr. A plain fraction has an automatic minimum equal to the largest unbreakable content inside it. Adding the zero minimum removes that floor, and pairing it with wrapping text or responsive media inside the cell completes the repair. Our step-by-step tutorial on the CSS grid layout tutorial for beginners builds this pattern into every example layout.

Repair 3: Correct Placement, Spans, and Overlap

If sizes look right but sections sit in the wrong places or overlap, the problem is placement. Start by removing all manual placement rules such as grid-column and grid-row from the items, and let auto-placement arrange them in document order. If the layout becomes sane, reintroduce placement one item at a time so you can see which rule caused the clash.

Watch for these specific errors. An end line smaller than the start line, such as grid-column: 3 / 2, creates confusing results. A span that exceeds your defined columns, such as placing an item at column 4 when you only defined three tracks, creates implicit tracks that stretch the layout with unexpected empty columns. And two items given the exact same cell will deliberately overlap, which is a feature for layered designs but a bug when done by accident.

If you use named areas with grid-template-areas, check that every row string has the same number of cells, that each name forms a neat rectangle, and that every item’s grid-area name is spelled identically to the template. One mismatched letter silently drops the item into auto-placement, which often looks like the whole layout exploded. The layout patterns in the grid lessons on sizing and placement on web.dev show correct area maps you can compare yours against.

Repair 4: Tame the Content Inside the Cells

Even a perfect grid can be broken by what sits inside the cells. Unconstrained images, long words, URLs, tables, and fixed-width embeds all hold their track open.

Apply a standard safety set to content inside grid items: images and videos get max-width: 100% and height: auto, text containers get overflow-wrap: break-word, and code blocks get overflow-x: auto so they scroll internally instead of stretching the column. Also add min-width: 0 to grid items that contain flexible or shrinking content, for the same automatic-minimum reason described for tracks. In practice, adding min-width: 0 to the item and minmax(0, 1fr) to the track solves the majority of stubborn overflow cases that survive every other fix.

If items look stretched vertically, set align-items: start on the container so each item keeps its natural height. Adjust a single element with align-self and justify-self rather than margins that distort track spacing.

Common Mistakes and Recovery Tips

The costliest mistake is rewriting the whole stylesheet in a panic. Grid problems are almost always one or two rules. Instead, comment out your newest grid rules, confirm the old layout returns, then restore them in small groups, refreshing after each group until the layout breaks again and reveals the offending rule.

Another common mistake is mixing systems on the same container, keeping old float, clearfix, and flex rules active alongside grid. Once an element becomes a grid container, remove those leftovers and clear percentage widths from items that grid now sizes.

Finally, add a mobile fallback: a media query that sets grid-template-columns: 1fr below about 700px. Many broken layout reports are simply a desktop grid viewed at phone width with no fallback defined.

Conclusion

A layout that breaks after adding grid is telling you where the new rules conflict with the old ones. Verify the container, make tracks flexible with fractions and minmax(0, 1fr), simplify placement until order returns, and constrain the content inside each cell. Use the grid overlay throughout, restore rules gradually instead of rewriting everything, and finish with a single-column media query for small screens. Followed in that order, these repairs turn a scrambled page back into a clean, deliberate grid layout.

Frequently Asked Questions

Why do my grid items overlap each other?

Overlap happens when two items are placed in the same cells, usually through identical grid-column and grid-row values or copied placement rules. Remove manual placement, let auto-placement arrange the items, then place only the items that truly need specific positions.

Why is one column much wider than the others?

Its content is probably forcing the track open. Long unbreakable text, a fixed-width image, or a wide table can set a large minimum size. Constrain the content with max-width: 100% and define the track as minmax(0, 1fr) so it can shrink as intended.

What are implicit tracks and why do they appear?

Implicit tracks are extra rows or columns the browser creates when an item is placed or spanned beyond the tracks you defined. They use automatic sizing, which often distorts the layout. Fix the placement values so every item fits inside your explicit grid.

Should I remove my old flexbox CSS when I switch to grid?

Remove flex and float rules from the container that is now a grid and from items that grid sizes for you. Flexbox can still be useful inside individual grid cells for arranging their inner content, so the cleanup is about ownership, not banning flex entirely.

How do I make my grid work on mobile phones?

Add a media query for small screens that collapses the layout to one column, for example grid-template-columns: 1fr, and lets rows stack in document order. Test at several narrow widths to confirm nothing overflows and tap targets stay comfortable.