---
title: Row
framework: docc
role: symbol
role_heading: Directive
path: docc/row
---

# Row

A container directive that arranges content into a grid-based row and column layout.

## Declaration

```swift
@Row(numberOfColumns: Int?) {
    @Column(size: Int = 1, alignment: Alignment = leading) { ... }
}
```

## Parameters

- `numberOfColumns`: The number of columns available in this row. (optional)

## Overview

Overview Create a new row by creating an @Row that contains child @Column directives. @Row {    @Column {       @Image(source: "icon-power-icon", alt: "A blue square containing a snowflake.") {          Ice power       }    }

@Column {       @Image(source: "fire-power-icon", alt: "A red square containing a flame.") {          Fire power       }    }

@Column {       @Image(source: "wind-power-icon", alt: "A teal square containing a breath of air.") {          Wind power       }    }

@Column {       @Image(source: "lightning-power-icon", alt: "A yellow square containing a lightning bolt.") {          Lightning power       }    } }

## Topics

- [Column](docc/column.md)

## See Also

### Creating Custom Page Layouts

- [TabNavigator](docc/tabnavigator.md)
- [Links](docc/links.md)
- [Small](docc/small.md)