UICollectionView Set number of columns
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.
Introduction
UICollectionView does not have a direct numberOfColumns property. The number of columns comes from layout math: item width, section insets, inter-item spacing, and the collection view's current width.
In practice, you choose a layout strategy and compute itemSize so that a row fits exactly the number of columns you want. For most grid screens, UICollectionViewFlowLayout plus UICollectionViewDelegateFlowLayout is enough.
Calculate Item Width From The Available Space
The basic formula is:
In Swift, that often looks like this:
That is the core pattern. Once the width is correct, the number of columns is effectively fixed.
Make The Column Count Dynamic
Many apps change the number of columns by width class or screen size. The simplest approach is to compute the count from the current bounds:
Then use that value inside sizeForItemAt. This works well for rotation, iPad split view, and compact versus regular layouts.
Invalidate Layout On Size Changes
If the collection view width changes, the old cell sizes may no longer match the desired column count. That is why size changes should trigger a layout invalidation or reload.
Without invalidation, rotation bugs often show up as clipped cells, leftover spacing, or one extra item wrapped onto the next row.
When Compositional Layout Is Better
If the grid is part of a more complex screen, compositional layout can express columns more directly:
That approach is powerful, but for a straightforward grid, flow layout is still easier to reason about.
Rotation And Size Changes
A column calculation that works in portrait can break in landscape if the collection view width changes and the layout is not invalidated. That is why grid code should always assume the width is dynamic, especially on iPad and during split-view resizing.
Common Pitfalls
- Looking for a built-in
numberOfColumnsproperty that does not exist. - Forgetting to subtract section insets and inter-item spacing from the available width.
- Calculating from
frametoo early instead of using the current bounds during layout. - Not invalidating the layout when the collection view width changes.
- Returning widths with fractional leftovers that cause subtle wrapping or spacing issues.
Summary
- '
UICollectionViewcolumns are controlled by layout math, not a dedicated property.' - Compute item width from the collection view width, insets, and spacing.
- Use
UICollectionViewDelegateFlowLayoutfor most standard grids. - Recalculate or invalidate the layout when size changes occur.
- Use compositional layout when the screen needs a more advanced grid definition.
Related reading
- UICollectionView spacing margins
- UICollectionView's cellForItemAtIndexPath is not being called
- UIDevice uniqueIdentifier deprecated - What to do now?
- UIFont - how to get system thin font
- UIGestureRecognizer blocks subview for handling touch events
- UIGestureRecognizer on UIImageView
- UIImage - implementing an auto levels algorithm
- UIImage Resize, then Crop
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.