Creating a grid UI with multiple objects in Unity could be a pain if you don’t know about Grid Layout Group. In this tutorial, we will see how to create a Grid UI that is scalable for any screen size.
What is Grid Layout Group in Unity
Grid Layout Group is a custom Unity script that allows you to arrange all its children in a grid view. You can add the Grid Layout Group as a component to any UI element.
It also provides customization options like spacing between cells, custom cell size. alignment and option to set portrait or landscape axis.
Let’s setup our UI grid in Unity
Creating a cell
The first step is to create a grid cell. We will be using an UI image and a UI button to create a grid cell.
Go ahead and add a UI image to your scene. Set the Rect transform dimension to the required cell size. Let’s set it to 100×100. Rename the image to cell.
Add a UI button as the child to the image. Let’s set the position of the button to the center of the image and set the dimension to 60×60. These dimensions can be set to your requirement. The dimensions mentioned above are just a reference value for this tutorial.
Here is how your Cell should look like
You can set the background image and button icon based on your requirement. I have downloaded thefree asset SweetLandGUI from Unity asset store and will be using a sprite from it for background and button image.
Once your cell is customized and ready. Drag and drop it to the project window to make it into a prefab.
Creating a grid
First let’s duplicate our Cell 15 more times. That way we will have a total of 16 cells for our grid.
Create an empty game object and let’s call it Grid. Resize the grid to hold all the cells. Since each of our cells are 100×100 and if we have 4 in each row with a spacing of 2 units between them then you will need a grid of size at least 406×406. To have some space in the corners lets set the size to 450×450.
Make all the cells as children of the grid.
Select the grid and set the anchors to stretch. This required to resize the grid when the screen size change. You can read more on our Unity anchors and pivots guide for better understanding.
Click on add component and add grid layout group. You will see that all your cells are now organized in a grid fashion.
Let’s customize it a little. Let’s not add any padding but if your grid is exactly near the screen corner then consider adding a little padding to the grid.
The cell size must be kept same as the cell that we created earlier. You can add spacing based on your requirement for this tutorial let’s add 2 in the X axis and 2 in the Y axis.
You can set the start corner to wherever you want the cells to start aligning from. Let’s set it to Upper Left. The start Axis needs to be set to Horizontal if you have a Landscape game and needs to be set to Vertical if you have a Portrait game. The child alignment is how the grid aligns based on the corners. Let’s set it to Middle center. You can leave the constrains as it is.
If you are planning to have more cells then the grid size may not be enough. You can check out our tutorial on scrollable UI to make the grid scrollable and to accommodate more cells.
Hope the tutorial was helpful and if you have any other questions then you can leave it in the comment box below.
