<!--
{
  "availability" : [
    "iOS: 14.0.0 -",
    "iPadOS: 14.0.0 -",
    "macCatalyst: 14.0.0 -",
    "macOS: 11.0.0 -",
    "tvOS: 14.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 7.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/GridItem",
  "metadataVersion" : "0.1.0",
  "role" : "Structure",
  "symbol" : {
    "kind" : "Structure",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI8GridItemV"
  },
  "title" : "GridItem"
}
-->

# GridItem

A description of a row or a column in a lazy grid.

```
struct GridItem
```

## Overview

Use an array of `GridItem` instances to configure the layout of items in
a lazy grid. Each grid item in the array specifies layout properties like
size and spacing for the rows of a [`LazyHGrid`](/documentation/SwiftUI/LazyHGrid) or the columns of
a [`LazyVGrid`](/documentation/SwiftUI/LazyVGrid). The following example defines four rows for a
horizontal grid, each with different characteristics:

```
struct GridItemDemo: View {
    let rows = [
        GridItem(.fixed(30), spacing: 1),
        GridItem(.fixed(60), spacing: 10),
        GridItem(.fixed(90), spacing: 20),
        GridItem(.fixed(10), spacing: 50)
    ]

    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows, spacing: 5) {
                ForEach(0...300, id: \.self) { _ in
                    Color.red.frame(width: 30)
                    Color.green.frame(width: 30)
                    Color.blue.frame(width: 30)
                    Color.yellow.frame(width: 30)
                }
            }
        }
    }
}
```

A lazy horizontal grid sets the width of each column based on the widest
cell in the column. It can do this because it has access to all of the views
in a given column at once. In the example above, the [`Color`](/documentation/SwiftUI/Color) views always
have the same fixed width, resulting in a uniform column width across the
whole grid.

However, a lazy horizontal grid doesn’t generally have access to all the
views in a row, because it generates new cells as people scroll through
information in your app. Instead, it relies on a grid item for information
about each row. The example above indicates a different fixed height for
each row, and sets a different amount of spacing to appear after each row:

![A screenshot of a grid of rectangles arranged in four rows and a large](images/com.apple.SwiftUI/GridItem-1-iOS@2x.png)

## Topics

### Creating a grid item

[`init(_:spacing:alignment:)`](/documentation/SwiftUI/GridItem/init(_:spacing:alignment:))

Creates a grid item with the specified size, spacing, and alignment.

### Inspecting grid item properties

[`alignment`](/documentation/SwiftUI/GridItem/alignment)

The alignment to use when placing each view.

[`spacing`](/documentation/SwiftUI/GridItem/spacing)

The spacing to the next item.

[`size`](/documentation/SwiftUI/GridItem/size-swift.property)

The size of the item, which is the width of a column item or the
height of a row item.

[`GridItem.Size`](/documentation/SwiftUI/GridItem/Size-swift.enum)

The size in the minor axis of one or more rows or columns in a grid
layout.


---

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)