<!--
{
  "availability" : [
    "iOS: 16.0.0 -",
    "iPadOS: 16.0.0 -",
    "macCatalyst: 16.0.0 -",
    "macOS: 13.0.0 -",
    "tvOS: 16.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 9.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/View/gridCellAnchor(_:)",
  "metadataVersion" : "0.1.0",
  "role" : "Instance Method",
  "symbol" : {
    "kind" : "Instance Method",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI4ViewPAAE14gridCellAnchoryQrAA9UnitPointVF"
  },
  "title" : "gridCellAnchor(_:)"
}
-->

# gridCellAnchor(_:)

Specifies a custom alignment anchor for a view that acts as a grid cell.

```
nonisolated func gridCellAnchor(_ anchor: UnitPoint) -> some View
```

## Parameters

`anchor`

The unit point that defines how to align the view
within the bounds of its grid cell.

## Return Value

A view that uses the specified anchor point to align its
content.

## Discussion

Grids, like stacks and other layout containers, perform most alignment
operations using alignment guides. The grid moves the contents of each
cell in a row in the y direction until the specified
[`VerticalAlignment`](/documentation/SwiftUI/VerticalAlignment) guide of each view in the row aligns with the same
guide of all the other views in the row. Similarly, the grid aligns the
[`HorizontalAlignment`](/documentation/SwiftUI/HorizontalAlignment) guides of views in a column by adjusting views
in the x direction. See the guide types for more information about
typical SwiftUI alignment operations.

When you use the `gridCellAnchor(_:)` modifier on a
view in a grid, the grid changes to an anchor-based alignment strategy
for the associated cell. With anchor alignment, the grid projects a
[`UnitPoint`](/documentation/SwiftUI/UnitPoint) that you specify onto both the view and the cell, and
aligns the two projections. For example, consider the following grid:

```
Grid(horizontalSpacing: 1, verticalSpacing: 1) {
    GridRow {
        Color.red.frame(width: 60, height: 60)
        Color.red.frame(width: 60, height: 60)
    }
    GridRow {
        Color.red.frame(width: 60, height: 60)
        Color.blue.frame(width: 10, height: 10)
            .gridCellAnchor(UnitPoint(x: 0.25, y: 0.75))
    }
}
```

The grid creates red reference squares in the first row and column to
establish row and column sizes. Without the anchor modifier, the blue
marker in the remaining cell would appear at the center of its cell,
because of the grid’s default [`center`](/documentation/SwiftUI/Alignment/center) alignment. With
the anchor modifier shown in the code above, the grid aligns the one
quarter point of the marker with the one quarter point of its cell in
the x direction, as measured from the origin at the top left of the
cell. The grid also aligns the three quarters point of the marker
with the three quarters point of the cell in the y direction:

![A screenshot of a grid with two rows and two columns. The cells in](images/com.apple.SwiftUI/View-gridCellAnchor-1-iOS@2x.png)

[`UnitPoint`](/documentation/SwiftUI/UnitPoint) defines many convenience points that correspond to the
typical alignment guides, which you can use as well. For example, you
can use [`topTrailing`](/documentation/SwiftUI/UnitPoint/topTrailing) to align the top and trailing edges
of a view in a cell with the top and trailing edges of the cell:

```
Color.blue.frame(width: 10, height: 10)
    .gridCellAnchor(.topTrailing)
```

![A screenshot of a grid with two rows and two columns. The cells in](images/com.apple.SwiftUI/View-gridCellAnchor-2-iOS@2x.png)

Applying the anchor-based alignment strategy to a single cell
doesn’t affect the alignment strategy that the grid uses on other cells.

### Anchor alignment for merged cells

If you use the [`gridCellColumns(_:)`](/documentation/SwiftUI/View/gridCellColumns(_:)) modifier to cause
a cell to span more than one column, or if you place a view in a grid
outside of a row so that the view spans the entire grid, the grid
automatically converts its vertical and horizontal alignment guides
to the unit point equivalent for the merged cell, and uses an
anchor-based approach for that cell. For example, the following grid
places the marker at the center of the merged cell by converting the
grid’s default [`center`](/documentation/SwiftUI/Alignment/center) alignment guide to a
[`center`](/documentation/SwiftUI/UnitPoint/center) anchor for the blue marker in the merged cell:

```
Grid(alignment: .center, horizontalSpacing: 1, verticalSpacing: 1) {
    GridRow {
        Color.red.frame(width: 60, height: 60)
        Color.red.frame(width: 60, height: 60)
        Color.red.frame(width: 60, height: 60)
    }
    GridRow {
        Color.red.frame(width: 60, height: 60)
        Color.blue.frame(width: 10, height: 10)
            .gridCellColumns(2)
    }
}
```

The grid makes this conversion in part to avoid ambiguity. Each column
has its own horizontal guide, and it isn’t clear which of these
a cell that spans multiple columns should align with. Further, in
the example above, neither of the center alignment guides for the
second or third column would provide the expected behavior, which is
to center the marker in the merged cell. Anchor alignment provides
this behavior:

![A screenshot of a grid with two rows and three columns. The cells in](images/com.apple.SwiftUI/View-gridCellAnchor-3-iOS@2x.png)

---

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)