Using CSS Grid layouts to build a page
-
- UpdatedJan 30, 2025
- 5 minutes to read
- Yokohama
- Building applications
Create a CSS Grid layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance.
CSS Grid is the most powerful layout system in CSS. CSS Grid is built on top of a two-dimensional grid. CSS Grid gives you control over how you create your pages. Use UI Builder to implement a CSS Grid layout using low-code layout configuration properties. For advanced layouts, you can view and edit CSS code to customize your layouts. Visit Mozilla to learn more about CSS Grid.
For example, you can have a grid with three columns and three rows to make a grid nine cells. You can place components inside these cells or make the component span multiple cells.

Customizing the layout of your page lets you take full advantage of CSS Grid so that you can achieve your overall page design. For more information, see Organize components in UI Builder pages.
To find out more about CSS layouts within your UI Builder instance, you can find them in the [sys_uib_template] table.
Create a CSS Grid layout with the new layout system
Create a CSS Grid layout in UI Builder to build powerful pages in a low-code environment.
Before you begin
Role required: admin
Procedure
Create a CSS Grid layout with the old layout system
Create a CSS Grid layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance.
Before you begin
Role required: admin
About this task
In the following procedure, you learn how to use CSS Grid to modify your CSS to customize the layout of your page.
Procedure
Result


On this page
Related Content
- Create a Flexbox layout with the old layout system
Create a Flexbox layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance.