CalculateY CalculateY

CSS Grid Calculator

CSS Grid column width follows the formula Column Width = (Container Width - Padding x 2 - (Columns - 1) x Gap) / Columns. For a 1200px container with 3 columns, 24px gap, and no padding, each column is (1200 - 2 x 24) / 3 = 384px. Enter your grid parameters below to compute exact column widths and generate a CSS snippet with grid-template-columns.

Quick Answer

In a 1200px container with 3 columns and a 24px gap, each column is 384px wide. The total gap space is 48px (two gaps between three columns).

Common Examples

Input Result
1200px container, 3 columns, 24px gap, 0 padding 384px per column
1440px container, 4 columns, 20px gap, 0 padding 345px per column
960px container, 12 columns, 16px gap, 0 padding 65.33px per column
1200px container, 3 columns, 24px gap, 32px padding 362.67px per column
800px container, 2 columns, 32px gap, 0 padding 384px per column

How It Works

CSS Grid lays out items in rows and columns defined by the grid-template-columns property. When using a fixed-width container, the actual width of each column depends on how much space remains after accounting for gaps and padding.

Column Width = (Container Width - 2 x Padding - Total Gap) / Columns

Total Gap = (Columns - 1) x Gap Size

Where:

  • Gaps exist between columns only, so there are always (n - 1) gaps for n columns
  • Padding applies to both sides of the container, reducing the available inner width
  • Using 1fr units in CSS Grid, the browser handles this math automatically

Using fr units vs. fixed widths

In practice, grid-template-columns: repeat(3, 1fr) with gap: 24px lets the browser calculate column widths automatically. The fr (fraction) unit distributes remaining space after gaps are subtracted. This calculator shows the computed pixel values so you can verify layouts, compare approaches, or work with fixed-width designs.

The gap property

The CSS gap property (previously grid-gap) sets spacing between grid items without adding space on the outer edges. This is more predictable than using margins, which can create unwanted space on the first and last columns.

Worked Example

For a 1200px container with 3 columns, 24px gap, and 32px padding on each side: Inner width = 1200 - (2 x 32) = 1136px. Total gap = (3 - 1) x 24 = 48px. Available for columns = 1136 - 48 = 1088px. Column width = 1088 / 3 = 362.67px. As a percentage of inner width: 362.67 / 1136 x 100 = 31.93%.

The CSS would be: display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 32px; width: 1200px;

Related Calculators

Flexbox Gap Calculator

Calculate item widths for flexbox layouts given container width, number of items, and gap size.

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing between two viewport widths.

Frequently Asked Questions

What is the difference between CSS Grid and Flexbox?
CSS Grid is designed for two-dimensional layouts (rows and columns simultaneously), while Flexbox is designed for one-dimensional layouts (a single row or column). Grid is better for page-level layouts and complex grid structures. Flexbox is better for distributing items along a single axis, such as navigation bars or card rows.
Should I use fr units or fixed pixel widths?
Use fr units for most layouts because they automatically adapt to the container width and account for gaps. Use fixed pixel widths only when columns must be an exact size regardless of the container. The fr unit divides the remaining space after fixed tracks and gaps are calculated.
What does repeat(3, 1fr) mean?
The repeat(3, 1fr) notation creates 3 columns of equal width, where 1fr means one fraction of the available space. After the browser subtracts gap space, the remaining width is divided equally among the three columns. This is equivalent to writing 1fr 1fr 1fr.
How does the gap property differ from margins?
The gap property only creates space between grid items, never on the outer edges. Margins on grid items add space on all sides, including the outer edges. Using gap results in cleaner, more predictable spacing because you do not need to remove margins from the first or last items.
Can I mix fixed and flexible column widths?
Yes. For example, grid-template-columns: 250px 1fr 1fr creates a fixed 250px sidebar and two equal flexible columns. The fr columns divide the remaining space (container width minus 250px minus gaps) equally.