Inside the UI editor the blocks, columns, rows and grid are some of the most basic layout elements you can add onto the UI canvas. Blocks are the founding blocks (pun intended) of the other 3 basic elements, as they are all different combinations of multiple block elements. Blocks are essentially rectangle like elements that you can edit to your will: changing their position, size, spacing, layout, color, style and much more. You can also add any other element inside a block like a video or an image or even make it into a link, allowing you limitless possibilities in creating your website.
What exactly are the different layout UI editor elements**?**
- The "block element" refers to an HTML element that, by default, creates a block-level box in the canvas's layout. Block-level elements typically start on a new line and extend the full width of their containing element. They create a "block" or a distinct section within the canvas structure.

- The “row element” is essentially a combination of two block elements inside another block element with the two child block elements being located above or below one another.

- The “column element” is essentially a combination of two block elements inside another block element with the two child block elements being located left or right of one another.

- The “grid element” is essentially a combination of four block elements inside another block element with the four child block elements being located above, below, left and right of one another.

How do you add basic layout elements into the UI canvas?
In the right-side inspector panel under the scene section there is an ambient light section. By default the ambient light is present on the 3D scene in a white color.
- Make the switch to the UI editor
- Click on the Add elements button in the top left corner
- On the pop up hover over the “basic” section to open another pop up
- On the new pop up you should see a layout section with 4 elements
- Click on the any of the 4 elements (block, row, column, or grid) in the layout section to add them onto the canvas
👉 Want to learn about adding images to the UI canvas?
Images