CalculateY
Quick Answer
In a 1200px container with 4 items and a 20px gap, each item is 285px wide. The total gap space is 60px (three gaps between four items).
Common Examples
| Input | Result |
|---|---|
| 1200px container, 4 items, 20px gap | 285px per item |
| 960px container, 3 items, 16px gap | 309.33px per item |
| 1440px container, 6 items, 24px gap | 220px per item |
| 800px container, 2 items, 32px gap | 384px per item |
How It Works
The item width in a flexbox layout with gap is:
Item Width = (Container Width − Total Gap Width) / Number of Items
Total Gap Width = (Number of Items − 1) × Gap Size
Where:
- Gaps only exist between items, so there are always (n − 1) gaps for n items
- The
calc()CSS function handles this:calc((100% - totalGap) / items) - This ensures items fill the container exactly with even spacing
Worked Example
For a 1200px container with 4 items and a 20px gap: Total gap = (4 - 1) × 20 = 60px. Available space = 1200 - 60 = 1140px. Item width = 1140 / 4 = 285px. As a percentage: 285 / 1200 × 100 = 23.75%. In CSS: flex: 0 0 calc(25% - 15px), where 15px = gap × (n-1)/n = 20 × 3/4.
Related Calculators
Frequently Asked Questions
Why not just use a percentage width?
Simple percentage widths (like
33.33%) don't account for the gap between items. With a 24px gap between 3 items at 33.33% width each, the total exceeds 100% and items wrap. The calc() approach subtracts the total gap space first.
Does this work with flex-wrap?
Yes. This calculation is specifically designed for wrapped flexbox layouts where you want a fixed number of items per row with consistent gaps. The CSS snippet uses
flex-wrap: wrap.
Can I use CSS Grid instead?
Yes, and it's often simpler. CSS Grid handles gaps natively.
grid-template-columns: repeat(3, 1fr) with gap: 24px achieves the same result without any width calculations. Use this calculator when you need flexbox specifically.