> For the complete documentation index, see [llms.txt](https://learn.mondayhero.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.mondayhero.io/design-to-swift/creating-components/system-components/grid-design-to-ios-android-code.md).

# Grid

If you need to display scrolling elements dynamically, you should check if they are lists or [grids](broken://pages/-MJxGXyqadXM5rCzXVzt). Lists are vertical, and grids can be vertical or horizontal. In lists, only 1 cell can be in a column but for Grids, it can be more than 1 cell in a column. Here is an example of both of them:

![Lists and Grids](/files/-MKpE6OolHScNdfLNTPX)

This page is created for grids. 

If you need to display scrolling elements dynamically, you should check if they are [lists](broken://pages/-MJxGU4JDa7NNKRIg-Np) or grids. You can find [how to understand the difference here](broken://pages/-MKphJRaRVi1rwvhK2Zo). If you have decided that you want to create Grids, this is the right place to read.

An example of a grid is below. In the image, the cell prototype repeats itself with different data inside. 

![](/files/-MS3OFuWKuvZNiTtZc6A)

Grids have different names in iOS and Android. Grids are explained below with the code and details.

### Generated code for iOS/Android and Details

{% tabs %}
{% tab title="iOS" %}

## CollectionView (Horizontal / Vertical) 

A grid is called `CollectionView` in Swift language.

A CollectionView object is responsible for managing an ordered collection of data items and presenting them in customizable layouts.

It has two directions as **Vertical** and **Horizontal**. You can select the one that fits your case. In the case below, you can see the CollectionView-Vertical and its generated code.

![CollectionView example.](/files/-MS7Q-Cu1kxQQGNpk-w1)

{% code title="ProfilePage.swift" %}

```swift
import UIKit

class ProfilePage: UIViewController {
	
//Connection from an Interface Builder to a UI component
@IBOutlet private weak var userPhotosCollectionView: UICollectionView!

		override func viewDidLoad() {
			super.viewDidLoad()
			setupViews()
	}

	private func setupViews() {
		userPhotosCollectionView.backgroundColor = UIColor.clear
		self.userPhotosCollectionView.dataSource = self
		}
}

// MARK: - Collection View DataSource

extension ProfilePage: UICollectionViewDataSource {
	func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
		return 10
	}

	func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        
		let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PictureCollectionViewCell", for: indexPath) as! PictureCollectionViewCell
		return cell
	}
}
```

{% endcode %}

The cell is defined in a separate file.

{% code title="PictureCollectionViewCell.swift" %}

```swift
import UIKit

class PictureCollectionViewCell: UICollectionViewCell {
	
	// MARK: - Properties

	@IBOutlet private weak var pic03ImageView: UIImageView!

    
	override init(frame: CGRect) {
		super.init(frame: frame)
		self.setupViews()
	}

	required init?(coder aDecoder: NSCoder) {
		super.init(coder: aDecoder)
	}

	func setupViews() {
		//The properties of the code are defined in Storyboard. 
	}
}
```

{% endcode %}
{% endtab %}

{% tab title="Android" %}

## RecyclerView-GridLayoutManager

{% hint style="warning" %}
⚠️This feature is available in **only Mac App**. Web App **support for Android** is coming soon.\
If you need to install the desktop app, [click here.](/getting-started/install-app-and-plugin.md)
{% endhint %}

`GridLayoutManager` is the `RecyclerView.LayoutManager` implementation that shows items in a grid. It is responsible for managing an ordered collection of data items and presenting them in customizable layouts.

It has two directions as **Vertical** and **Horizontal**. You can select the one that fits your case. In the case below, you can see the GridLayoutManager-Vertical and its generated code.

![](/files/-MHFWG4XSYcqtuCWjoZz)

Let's see the generated code for `GridLayoutManager`.

```markup
<!--activityProfilePage.xml-->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/userPicturesRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/userpicturesrecyclerview_background_drawable"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
tools:listitem="@layout/layout_user_picture_card_view"
app:spanCount="3"
android:orientation="vertical"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="1dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photosTextView"
app:layout_constraintBottom_toTopOf="@+id/profileIconImageView"/>
```

The card is defined in a separate file.

```markup
<!--layoutUserPictureCardView.xml-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
	
<ImageView
android:id="@+id/pic03ImageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="@drawable/pic04"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
	
</androidx.constraintlayout.widget.ConstraintLayout>

```

{% endtab %}
{% endtabs %}