# Convert to Grid

## Grid to Swift/Android code

If you need to display scrolling elements dynamically, you should check if they are [lists](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code/list-design-to-ios-android-code.md) or grids. You can find [how to understand the difference here](/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code.md). If you have decided that you want to create Grids, this is right please to read.

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

![](/files/-MKpk-F_dLM_rKdOHkAj)

 

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.

![](/files/-MGsUYUQcgIKaef_BBCI)

{% 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

`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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/list-grid-design-to-ios-android-code/grid-design-to-ios-android-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.