<!--
{
  "documentType" : "article",
  "framework" : "UIKit",
  "identifier" : "/documentation/UIKit/layouts",
  "metadataVersion" : "0.1.0",
  "role" : "collectionGroup",
  "title" : "Layouts"
}
-->

# Layouts

Arrange your collection view content in a highly configurable layout.

## Discussion

A collection view *layout* defines the visual arrangement of the content in your collection. Layouts are designed to be flexible to let you create any kind of arrangement you need for your content, from simple to complex. The simplest type of collection view layout displays its items in a grid, but you can define layouts to arrange items however you like. For example, you might create a layout where items are arranged in a circle or vary in size. You can also change layouts dynamically at runtime whenever you need to present items differently, such as when a user rotates the device.

Collection view layouts are customizable and highly visual. For example, the App Store app uses a single collection view with custom layouts per section to showcase different kinds of content.

![Schematic representation of the App Store app on iOS, showing a collection view with a compositional layout. The layout is composed of two horizontally-scrolling sections that have different layouts. The top section shows one group with one item visible onscreen, with other groups peeking in from the sides of the screen. The bottom section shows one group that’s a column of three cells, each of those cells being an item.](images/com.apple.uikit/media-3568662@2x.png)

For design guidance, see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/views/collections/).

## Topics

### Essentials

[Implementing modern collection views](/documentation/UIKit/implementing-modern-collection-views)

Bring compositional layouts to your app and simplify updating your user interface with diffable data sources.

[`UICollectionViewCompositionalLayout`](/documentation/UIKit/UICollectionViewCompositionalLayout)

A layout object that lets you combine items in highly adaptive and flexible visual arrangements.

### Components

[`NSCollectionLayoutItem`](/documentation/UIKit/NSCollectionLayoutItem)

The most basic component of a collection view’s layout.

[`NSCollectionLayoutGroup`](/documentation/UIKit/NSCollectionLayoutGroup)

A container for a set of items that lays out the items along a path.

[`NSCollectionLayoutSection`](/documentation/UIKit/NSCollectionLayoutSection)

A container that combines a set of groups into distinct visual groupings.

### Size and spacing

[`NSCollectionLayoutDimension`](/documentation/UIKit/NSCollectionLayoutDimension)

An individual dimension representing an item’s width or height in a collection view.

[`NSCollectionLayoutSize`](/documentation/UIKit/NSCollectionLayoutSize)

The width and the height of an item in a collection view.

[`NSCollectionLayoutSpacing`](/documentation/UIKit/NSCollectionLayoutSpacing)

An object that defines the space between or around items in a collection view.

[`NSCollectionLayoutEdgeSpacing`](/documentation/UIKit/NSCollectionLayoutEdgeSpacing)

An object that defines the space around the edges of items in a collection view.

[`NSCollectionLayoutContainer`](/documentation/UIKit/NSCollectionLayoutContainer)

A protocol used to provide information about the size and content insets of a layout’s container.

### Configuration

[`UICollectionViewCompositionalLayoutConfiguration`](/documentation/UIKit/UICollectionViewCompositionalLayoutConfiguration)

An object that defines scroll direction, section spacing, and headers or footers for the layout.

[`UICollectionViewCompositionalLayoutSectionProvider`](/documentation/UIKit/UICollectionViewCompositionalLayoutSectionProvider)

A closure that creates and returns each of the layout’s sections.

[`NSCollectionLayoutEnvironment`](/documentation/UIKit/NSCollectionLayoutEnvironment)

A protocol used to provide information about the layout’s container and environment traits, such as size classes and display scale factor.

### Interaction

[`UICollectionLayoutSectionOrthogonalScrollingBehavior`](/documentation/UIKit/UICollectionLayoutSectionOrthogonalScrollingBehavior)

The scrolling behavior of the layout’s sections in relation to the main layout axis.

### Appearance

[`NSCollectionLayoutAnchor`](/documentation/UIKit/NSCollectionLayoutAnchor)

An object that defines how to attach a supplementary item to an item in a collection view.

[`NSCollectionLayoutSupplementaryItem`](/documentation/UIKit/NSCollectionLayoutSupplementaryItem)

An object used to add an extra visual decoration to an item in a collection view.

[`NSCollectionLayoutBoundarySupplementaryItem`](/documentation/UIKit/NSCollectionLayoutBoundarySupplementaryItem)

An object used to add headers or footers to a collection view.

[`NSCollectionLayoutDecorationItem`](/documentation/UIKit/NSCollectionLayoutDecorationItem)

An object used to add a background to a section of a collection view.

### Advanced layouts

[`NSCollectionLayoutGroupCustomItem`](/documentation/UIKit/NSCollectionLayoutGroupCustomItem)

An item used in a group with a custom layout arrangement.

[`NSCollectionLayoutGroupCustomItemProvider`](/documentation/UIKit/NSCollectionLayoutGroupCustomItemProvider)

A closure that creates and returns each of the custom group’s items.

### Layout updates

[`NSCollectionLayoutVisibleItem`](/documentation/UIKit/NSCollectionLayoutVisibleItem)

An item that’s currently visible within the bounds of a section.

[`NSCollectionLayoutSectionVisibleItemsInvalidationHandler`](/documentation/UIKit/NSCollectionLayoutSectionVisibleItemsInvalidationHandler)

A closure called before each layout cycle to allow modification of items in a section immediately before they’re displayed.

[`UICollectionViewUpdateItem`](/documentation/UIKit/UICollectionViewUpdateItem)

An object that describes a single change to make to an item in a collection view.

[`UICollectionViewFocusUpdateContext`](/documentation/UIKit/UICollectionViewFocusUpdateContext)

A context object that stores information specific to a focus update in a collection view.

[`UICollectionViewLayoutInvalidationContext`](/documentation/UIKit/UICollectionViewLayoutInvalidationContext)

A context object that declares which parts of your layout need to be updated when the layout is invalidated.

### Manual layouts

[Customizing collection view layouts](/documentation/UIKit/customizing-collection-view-layouts)

Customize a view layout by changing the size of cells in the flow or implementing a mosaic style.

[`UICollectionViewLayout`](/documentation/UIKit/UICollectionViewLayout)

An abstract base class for generating layout information for a collection view.

[`UICollectionViewFlowLayout`](/documentation/UIKit/UICollectionViewFlowLayout)

A layout object that organizes items into a grid with optional header and footer views for each section.

[`UICollectionViewTransitionLayout`](/documentation/UIKit/UICollectionViewTransitionLayout)

A special type of layout object that lets you implement behaviors when changing from one layout to another in your collection view.

[`UICollectionViewLayoutAttributes`](/documentation/UIKit/UICollectionViewLayoutAttributes)

A layout object that manages the layout-related attributes for a given item in a collection view.

[`UICollectionViewFlowLayoutInvalidationContext`](/documentation/UIKit/UICollectionViewFlowLayoutInvalidationContext)

A set of properties for determining whether to recompute the size of items or their position in the layout.

### Data

[`NSDiffableDataSourceSnapshot`](/documentation/UIKit/NSDiffableDataSourceSnapshot-swift.struct)

A representation of the state of the data in a view at a specific point in time.

### Data

[`NSDiffableDataSourceSnapshotReference`](/documentation/UIKit/NSDiffableDataSourceSnapshotReference)

A representation of the state of the data in a view at a specific point in time.



---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)