CSS Grid: Even Columns with Space-Between Gaps Flush Edges

Use CSS Grid’s gap (column-gap) and proper track sizing — not justify-content — to get equal space between columns while keeping the outer columns flush. Change your grid to grid-template-columns: repeat(4, minmax(0, 1fr)), use gap (or column-gap) for the spacing, remove any horizontal padding on the grid container, and either make buttons fill their column or snap the first/last column items to start/end with justify-self (nth-child).

Contents

• How CSS Grid handles spacing — gap vs justify-content
• Minimal CSS fix — gap & grid-template-columns (copy/paste)
• Two practical approaches: fill columns vs fixed circular buttons
• Option A — Buttons fill each column (simplest flush edges)
• Option B — Fixed-size circular buttons, edges flush with nth-child
• Responsive tweaks and accessibility
• Debug checklist
• Sources
• Conclusion

How CSS Grid handles spacing — gap vs justify-content

Why doesn’t justify-content: space-between do what it does in Flexbox? In Grid, justify-content aligns the entire grid block inside the container; it doesn’t distribute space between columns. The property that creates equal space between grid tracks is gap (or its longhands column-gap / row-gap) — it adds space only between items, not at the outer edges, which is exactly what you want. See the MDN note on the relationship of Grid layout and the gap behaviour for confirmation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout and the column-gap reference: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap.

In short: use gap for equal inter-column spacing and make sure your grid tracks are sized so the grid spans the container (so the first/last tracks sit flush).

I’ll show two practical ways to achieve your calculator layout below.

Minimal CSS fix — gap & grid-template-columns (copy/paste)

Replace the .button-container block and add two small rules. This keeps your circular buttons (3rem) and makes the leftmost/rightmost buttons touch the grid edges while keeping equal gaps between columns.

.button-container {
 /* keep the top spacing, but remove horizontal padding so grid edges = container edges */
 padding-top: 0.5rem;
 padding-left: 0;
 padding-right: 0;

 display: grid;
 /* allow tracks to shrink below min-content and share remaining space equally */
 grid-template-columns: repeat(4, minmax(0, 1fr));

 /* equal spacing only between columns/rows */
 gap: 1rem; /* shorthand sets both column-gap and row-gap */
 row-gap: 1rem;

 /* center items by default (so middle column buttons look centered) */
 justify-items: center;
 align-items: center;
}

/* snap items that live in column 1 to the left edge of their track,
 and items in column 4 to the right edge of their track */
.button-container > *:nth-child(4n+1) { justify-self: start; } /* col 1, 5, 9... */
.button-container > *:nth-child(4n) { justify-self: end; } /* col 4, 8, 12... */

/* keep your button look */
.button-container button {
 width: 3rem;
 height: 3rem;
 border-radius: 50%;
 background-color: #ffcccc;
 border: none;
 font-size: 1.5rem;
 cursor: pointer;
 transition: background-color 0.3s;
}

Why this works:

• gap only creates room between columns — the first and last grid tracks remain flush to the container edges.
• minmax(0, 1fr) prevents the columns from being widened by intrinsic content, so the grid actually divides the available width evenly.
• The nth-child rules place first/last column buttons at the track edges while leaving other buttons centered.

If you want every button to reach the edges of its track (no centering hacks), see Option A below.

Two practical approaches: fill columns vs fixed circular buttons

Option A — Buttons fill each column (simplest flush edges)

Make each button fill its column. This guarantees the button (or its visible box) touches the container edges without special selectors.

.button-container {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 1rem;
 justify-items: stretch;
 align-items: stretch;
 padding-left: 0;
 padding-right: 0;
}

.button-container button {
 width: 100%;
 aspect-ratio: 1 / 1; /* keep square buttons */
 max-width: 4rem; /* optional cap on very wide screens */
 border-radius: 0.5rem; /* or 50% if you prefer circles */
}

Pros:

• Zero hacks; first and last columns are flush automatically.
• Responsive: columns scale, buttons keep square shape via aspect-ratio.

Cons:

• Buttons size = available column width; you may need max-width so they don’t become huge on wide screens.

Relevant reference on gap: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap and the CSS-Tricks Grid guide: https://css-tricks.com/snippets/css/complete-guide-grid/

Option B — Fixed-size circular buttons, edges flush using nth-child (keeps 3rem circles)

This is the copy/paste solution in the Minimal CSS fix. It preserves 3rem circular buttons, centers interior column buttons, and forces the outer column items to hug the edges:

• Use grid-template-columns: repeat(4, minmax(0, 1fr))
• Use gap: 1rem
• Set justify-items: center
• Then target items in the first and fourth column with nth-child selectors to start / end

This keeps the aesthetic of small circular buttons while meeting your flush-edge requirement.

Reference example and community discussion of similar tactics: https://stackoverflow.com/questions/46951008/equal-space-between-grid-items-with-first-and-last-pinned-to-container-edges and https://stackoverflow.com/questions/70770416/how-do-make-columns-in-a-grid-space-evenly-like-with-flexbox

Responsive tweaks and accessibility

• Prevent overly-small columns by using a minimum: grid-template-columns: repeat(4, minmax(44px, 1fr)); — that ensures each button has a usable minimum on small screens.
• Or use repeat(auto-fit, minmax(44px, 1fr)) if you want fewer columns on tiny screens.
• Keep box-sizing: border-box; globally to avoid unexpected width calculations.
• For keyboard users, add a visible focus style:

.button-container button:focus {
outline: 2px solid #333;
outline-offset: 2px;
}

• If you need the buttons to be visually flush with the outer edge of the whole .calculator (not just .button-container), remove horizontal padding from .calculator or move padding to .screen so the grid can span full width. Avoid negative margins — restructure instead.

For a calculator UI tutorial that uses grid and gap for neat layouts, see https://freshman.tech/css-grid-calculator/ and general grid examples at https://gridbyexample.com/examples/example33/.

Debug checklist

If things still look off, check this:

• Remove any horizontal padding on .button-container (and/or verify .calculator doesn’t add unwanted padding).
• Confirm gap is set (open Styles in DevTools and look at column-gap / row-gap).
• Verify grid-template-columns uses minmax(0, 1fr) rather than plain 1fr if content is wide.
• Check for margins on the button elements — margins create extra outer spacing.
• Use browser DevTools’ Grid inspector to see tracks/gaps (Chrome/Firefox have grid overlays).
• If you used nth-child selectors, make sure your element count and column count match (nth-child(4n+1) and nth-child(4n) for 4 columns).

Sources

• MDN — column-gap
• MDN — Relationship of grid layout to other layout methods
• CSS-Tricks — Complete Guide to Grid
• Grid by Example — Aligning the grid with space-around and space-between
• W3Schools — CSS column-gap property
• Stack Overflow — make columns in a grid “space-evenly” like with flexbox
• Stack Overflow — equal space between grid items with first/last pinned
• Tailwind CSS — gap docs
• Freshman.tech — calculator layout with CSS Grid

Conclusion

CSS Grid gives you the exact behavior you want when you use the gap property and proper track sizing (minmax(0, 1fr)). Remove horizontal padding on the grid container, use gap for equal inter-column spacing, and choose one of two patterns: make buttons fill each column (simpler) or keep fixed-size buttons and snap first/last column items to edges with justify-self (nth-child). Try the minimal copy/paste fix above — it should give you evenly distributed columns, equal gaps, and outer buttons flush to the .button-container edges.