Why Is My CSS Grid Not Equal Height?

06/11/2026 by FrontFixer

CSS grid not equal height problems usually happen when grid items are not stretching, inner cards do not use height 100%, rows are being compared incorrectly, or card content is not arranged with a consistent internal layout.

CSS Grid Equal Height Fix

Why is my CSS grid not equal height?

CSS Grid can make columns line up beautifully, but equal-height cards still break when one card has more text, another has a taller image, or the grid item stretches while the card inside it does not. The fix depends on what “equal height” means: equal inside the same row, equal across all rows, or equal internal content alignment.

CSS Fixes Responsive Fixes

CSS Grid
equal height cards
align-items
grid-auto-rows

Quick diagnosis

If CSS grid is not equal height, first decide whether the grid item, the card, or the content inside the card is the part that needs to match.

align-items:start disables stretchingGrid items will not fill the row height if you tell them to align at the start.

The grid item stretches, but the card does notThe wrapper may be equal height while the card inside still uses content height.

Rows are equal only per rowCSS Grid naturally equalizes items in the same row, not every card across every row.

Buttons sit at different heightsCard content needs a column layout with the CTA pushed to the bottom.

Images create uneven cardsDifferent image heights make cards look unequal even when the grid is working.

Mobile changes the layoutA desktop equal-height pattern may need to relax or stack on small screens.

What the bug looks like

Cards in a grid look uneven, buttons sit at different levels, or shorter cards do not stretch to match taller cards.

Why it happens

The grid, grid item, card wrapper, and inner content layout are not all following the same height strategy.

What usually fixes it

Use stretch alignment, make the card fill the grid area, and use a flex column inside the card for consistent content alignment.

Error 1

`align-items:start` prevents equal height stretching

CSS Grid items stretch by default. But if the grid container uses align-items:start, each item keeps its own content height. That makes cards in the same row look uneven.

Broken code

Stretch disabled

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

Broken visual result

Cards have different heights

uneven

Feature grid

The row does not stretch items to the same height.

Short card Longer card with more content and more height Medium card

align-items:start tells the grid items not to stretch vertically.

Correct code

Stretch items

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

Fixed visual result

Cards stretch in the row

equal row

Feature grid

The grid items stretch to match the tallest item in the row.

Short card Longer card with more content and more height Medium card

For same-row equal height, let grid items stretch instead of aligning them at the start.

Error 2

The grid item is equal height, but the card inside is not

Sometimes the grid item is stretching correctly, but the visible card inside it still uses content height. In that case, make the card fill the grid item with height:100%.

Broken code

Inner card stays short

.grid {
  display: grid;
  align-items: stretch;
}

.card {
  /* visible card still uses content height */
}

Broken visual result

The wrapper stretches, not the card

inner issue

Card wrappers

The grid area may be equal, but the visible card does not fill it.

Short inner card Tall inner card with extra text Medium inner card

The equal-height grid area is invisible if the inner card does not fill it.

Correct code

Card fills grid item

.grid {
  display: grid;
  align-items: stretch;
}

.card {
  height: 100%;
}

Fixed visual result

Visible cards match

height 100%

Card wrappers

The visible card fills the grid area, so the row looks equal.

Short inner card Tall inner card with extra text Medium inner card

When a card is nested inside a grid item, make the visible card fill the available height.

Error 3

You expect all rows to have the same height

CSS Grid naturally equalizes items inside the same row. It does not always make every row in the whole grid the same height. If you want rows across the grid to match, use grid-auto-rows:1fr carefully.

Broken code

Rows use content height

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
}

Broken visual result

Rows are different heights

auto rows

Multi-row grid

Each row follows its own tallest content.

Short Short Much taller card with more content Medium

Different rows can have different heights because each row is sized by its own content.

Correct code

Equal implicit rows

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}

.card {
  height: 100%;
}

Fixed visual result

Rows share equal height

1fr rows

Multi-row grid

Implicit rows can share the available row height pattern.

Short Short Much taller card with more content Medium

Use grid-auto-rows:1fr only when equal row height is really the visual goal.

Error 4

The cards are equal height, but the content inside is not aligned

Sometimes the card heights are equal, but the CTAs, badges, or prices appear at different vertical positions. That is an internal card layout problem. Use a flex column inside the card and push the CTA to the bottom.

Broken code

Content stacks naturally

.card {
  height: 100%;
}

.card-button {
  /* button follows content */
}

Broken visual result

Buttons sit unevenly

inside uneven

Pricing grid

The card boxes match, but the internal buttons do not line up.

BasicChoose Pro plan with more details and longer descriptionChoose TeamChoose

Equal outer height does not automatically align internal content.

Correct code

Flex column card

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-button {
  margin-top: auto;
}

Fixed visual result

Buttons align at bottom

aligned CTAs

Pricing grid

The card content uses a column layout, so CTAs line up.

BasicChoose Pro plan with more details and longer descriptionChoose TeamChoose

Use flex inside the grid card when you need internal elements to align consistently.

Premium pattern

A production-minded equal-height CSS Grid pattern

A strong equal-height card grid uses responsive tracks, stretch alignment, safe column sizing, cards that fill their grid area, and flex column content inside each card.

Premium code

Equal-height card system

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
}

.card-grid > * {
  min-width: 0;
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-media {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card-action {
  margin-top: auto;
}

Premium visual result

Equal height and aligned content

premium

Production card grid

The grid, cards, and inner content all follow the same height strategy.

StarterView Professional plan with longer detailsView TeamView

Premium equal-height grids do not rely on fake fixed heights. They use grid for rows and flex for internal card alignment.

Fast practical rule

If CSS grid is not equal height, check align-items first. Then make the visible card use height:100%. If the card content still looks uneven, use display:flex, flex-direction:column, and margin-top:auto for bottom-aligned CTAs.

Debug checklist

Check whether the grid has align-items:start, center, or another value that prevents stretching.
Use align-items:stretch when same-row equal height is desired.
If the visible card is nested inside the grid item, add height:100% to the card.
Use display:flex and flex-direction:column inside cards when buttons need to align at the bottom.
Use margin-top:auto for card CTAs that should sit at the same vertical level.
Use grid-auto-rows:1fr only when equal row height across multiple rows is actually needed.
Normalize image areas with aspect-ratio or consistent media height.
Keep responsive behavior in mind: equal-height desktop cards may stack naturally on mobile.

Best first moveRemove align-items:start and test whether the grid items stretch.

Most common causeThe grid item stretches, but the visible card inside does not use height:100%.

Most sneaky causeThe cards are equal height, but internal buttons or badges are not aligned.

Better mindsetGrid controls the outside. Flex often controls the inside of each card.

Final takeaway

A CSS grid not equal height problem is usually not solved by forcing a random fixed height. The real fix is to know which level needs equal height: the grid item, the visible card, the grid row, or the content inside the card.

Let grid stretch the outside, make the card fill the grid area, and use flex inside the card for aligned internal content. That gives you equal-height cards without fragile fixed-height hacks.

Want more fixes like this?

Browse more CSS Grid, card layout, and responsive debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why Is My Grid Column Overflowing?

06/11/2026 by FrontFixer

Grid column overflowing problems usually happen when CSS Grid columns use 1fr without minmax(0,1fr), fixed widths, long text, images, percentage columns plus gap, or missing responsive grid rules.

CSS Grid Overflow Fix

Why is my grid column overflowing?

A grid column overflowing can make a card stick out of the layout, create mobile horizontal scroll, cut off content, or make the whole page wider than the screen. The confusing part is that 1fr sounds flexible, but grid items still have automatic minimum sizes. Long text, images, fixed columns, and gaps can force a grid column wider than you expected.

CSS Fixes Responsive Fixes

CSS Grid
minmax(0, 1fr)
Long text
Mobile overflow

Quick diagnosis

If a grid column is overflowing, check whether the column is allowed to shrink below its content’s minimum size.

1fr is not always enough A grid item can still force the column wider because of its automatic minimum size.

Long content refuses to shrink URLs, long words, buttons, badges, and nowrap text can push the column.

Fixed columns are too wide Values like 220px 220px can overflow small containers.

Gap is extra width 50% 50% plus gap becomes wider than the container.

Images are wider than the column Images need max-width:100% or they can break the grid.

Mobile rules are missing Desktop grid columns often need auto-fit, minmax(), or a stacked layout.

What the bug looks like

One grid column pushes outside the container, the last card is cut off, or the page gets horizontal scroll.

Why it happens

Grid tracks and grid items have minimum sizing behavior that can be stronger than the flexible layout you expected.

What usually fixes it

Use minmax(0,1fr), min-width:0, responsive minmax() tracks, and safe image/text rules.

Error 1

`1fr` columns are being pushed by long content

A grid column can overflow even with 1fr because the grid item’s automatic minimum size may be based on its content. Long text can force the column wider unless the track and item are allowed to shrink.

Broken code

1fr can still overflow

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card-title {
  white-space: nowrap;
}

Broken visual result

Column pushed wider

overflow

Dashboard grid

Long content makes the first column wider than expected.

VeryLongUnbreakableGridColumnTitle Stats

1fr does not automatically mean “ignore long content.”

Correct code

minmax + min-width

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.grid > * {
  min-width: 0;
}

.card-title {
  overflow-wrap: anywhere;
}

Fixed visual result

Column can shrink

fits

Dashboard grid

The column is allowed to shrink and the content can wrap safely.

VeryLongUnbreakableGridColumnTitle Stats

minmax(0,1fr) tells the grid track it can shrink below the content’s automatic minimum.

Error 2

Fixed grid columns are too wide for mobile

Fixed grid columns can look clean on desktop and break immediately on smaller containers. If the container is narrower than the combined column widths and gaps, the grid will overflow.

Broken code

Fixed desktop columns

.grid {
  display: grid;
  grid-template-columns: 220px 220px;
  gap: 12px;
}

Broken visual result

Fixed columns overflow

fixed width

Product grid

The columns keep desktop widths inside a smaller container.

Product Details

Fixed column widths cannot adapt when the available space gets smaller.

Correct code

Responsive columns

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}

.grid > * {
  min-width: 0;
}

Fixed visual result

Columns adapt

responsive

Product grid

The grid can reduce columns or stack before overflowing.

Product Details

Use responsive minmax() tracks instead of fixed desktop columns.

Error 3

Percentage columns plus gap are wider than the container

Two columns at 50% already equal the full container width. If you add a gap between them, the grid becomes wider than the container unless the column math accounts for the gap.

Broken code

100% + gap

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 18px;
}

Broken visual result

Gap adds extra width

gap overflow

Two-column section

The columns already take 100%, then the gap makes the grid too wide.

Left Right

Gap is real layout space. It is added between the tracks.

Correct code

fr columns include gap better

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.grid > * {
  min-width: 0;
}

Fixed visual result

Gap fits inside layout

fits

Two-column section

The columns share the remaining space after the gap is considered.

Left Right

Fractional tracks are usually safer than percentage tracks when using grid gaps.

Error 4

An image inside the grid column is wider than the column

Sometimes the grid column is not the original problem. A child image, card, table, code block, or button inside the column is wider than the column and forces the grid track to expand.

Broken code

Image forces width

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card img {
  width: 260px;
}

Broken visual result

Child content breaks track

wide child

Image grid

The image is wider than the grid column can safely hold.

Text

A fixed-width child can make the entire grid column overflow.

Correct code

Media respects column

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.card img {
  display: block;
  max-width: 100%;
  height: auto;
}

Fixed visual result

Child content fits

safe image

Image grid

The image is constrained by the column instead of expanding it.

Text

Constrain media and other child content so it cannot force the grid track wider.

Premium pattern

A production-minded CSS Grid column pattern

A reliable grid pattern gives columns a safe minimum, allows child content to shrink, wraps long text, constrains media, and uses responsive tracks instead of fixed desktop assumptions.

Premium code

Safe responsive grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 2vw, 24px);
}

.grid > * {
  min-width: 0;
}

.grid img,
.grid video {
  display: block;
  max-width: 100%;
  height: auto;
}

.grid h3,
.grid p,
.grid a {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Premium visual result

Responsive grid, no overflow

premium

Production grid

The tracks, content, media, and gap all respect the container.

Feature card LongResponsiveGridContent Image safe

Premium grid CSS does not hide overflow. It prevents the column from creating it.

Fast practical rule

If a grid column is overflowing, try grid-template-columns:minmax(0,1fr) and min-width:0 on the grid child before using overflow-x:hidden. Then check long text, images, fixed widths, and percentage columns plus gap.

Debug checklist

Inspect the grid columns and check whether 1fr tracks need minmax(0,1fr).
Add min-width:0 to grid children that contain long text or nested content.
Look for fixed column widths that are too large for mobile containers.
Avoid 50% 50% plus gap unless the gap is accounted for.
Check images, videos, tables, code blocks, and buttons inside the grid column.
Use max-width:100% on media inside grid items.
Use overflow-wrap:anywhere for long words, URLs, or unbreakable labels.
Use responsive grid tracks like auto-fit with minmax().

Best first move Replace 1fr with minmax(0,1fr) on the overflowing track.

Most common cause Long content or images force the column wider than the layout expects.

Most sneaky cause 50% 50% columns plus gap quietly become wider than 100%.

Better mindset Grid columns are flexible only when their minimum sizing rules allow them to be flexible.

Final takeaway

A grid column overflowing is usually caused by minimum sizing, not by CSS Grid being broken. The column is being forced wider by long content, fixed widths, percentage tracks plus gap, or media that does not respect the column.

Start with minmax(0,1fr) and min-width:0. Then make text, images, gaps, and responsive tracks safe. That fixes the real grid overflow instead of hiding it.

Want more fixes like this?

Browse more CSS Grid, overflow, and responsive debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why is my CSS grid not equal height?

What the bug looks like

Why it happens

What usually fixes it

align-items:start prevents equal height stretching

Broken code

Broken visual result

Correct code

Fixed visual result

The grid item is equal height, but the card inside is not

Broken code

Broken visual result

Correct code

Fixed visual result

You expect all rows to have the same height

Broken code

Broken visual result

Correct code

Fixed visual result

The cards are equal height, but the content inside is not aligned

Broken code

Broken visual result

Correct code

Fixed visual result

A production-minded equal-height CSS Grid pattern

Premium code

Premium visual result

Fast practical rule

Debug checklist

Related fixes that can help

Final takeaway

Want more fixes like this?

Why is my grid column overflowing?

What the bug looks like

Why it happens

What usually fixes it

1fr columns are being pushed by long content

Broken code

Broken visual result

Correct code

Fixed visual result

Fixed grid columns are too wide for mobile

Broken code

Broken visual result

Correct code

Fixed visual result

Percentage columns plus gap are wider than the container

Broken code

Broken visual result

Correct code

Fixed visual result

An image inside the grid column is wider than the column

Broken code

Broken visual result

Correct code

Fixed visual result

A production-minded CSS Grid column pattern

Premium code

Premium visual result

Fast practical rule

Debug checklist

Related fixes that can help

Final takeaway

Want more fixes like this?

`align-items:start` prevents equal height stretching

`1fr` columns are being pushed by long content