---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/application-development

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Using CSS Grid layouts to build a page

# Using CSS Grid layouts to build a page {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura

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](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) 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.
Figura 1. CSS Grid layout

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](https://servicenow-prod.fluidtopics.net/EBKYgrU69vbvSMPnvzBcmQ "Column layouts organize components on a UI Builder page. Learn how column layouts are used in UI Builder.").

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 {#ariaid-title2}

Create a CSS Grid layout in UI Builder to build powerful
pages in a low-code
environment.

### Antes de Iniciar

Role required: admin

### Procedimento

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. [Create a page in UI Builder](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Select the + Add content button in the UI Builder stage.
5. Select Grid in the layouts tab.  
6. Select the Styles tab in the configuration panel.
7. In the Layout section, you should see Grid highlighted.  
8. In the Layout section of the styles tab, you can change the following:  

   Columns
   :   Defines the number, order, and width of grid columns.

   Rows
   :   Defines the number, order, and width of grid rows.

   Direction
   :   Sets whether newly added components are stacked horizontally or
       vertically.

   Gap
   :   Sets the size of the gap between rows and columns.  
       Nota:  
       Select Show advanced layout options to see the next four options.

   Align items
   :   Defines how components within the container align as a group.

   Justify items
   :   Defines how the browser distributes space between and around content items
       along the inline axis of a grid container.

   Align content
   :   Sets the distribution of space between and around content items along a
       grid's block axis.

   Justify content
   :   Defines how to pack or space apart the components within the
       container.

   Visit [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to learn more about CSS Grid
   layout
   configurations.
9. **Opcional:** You can edit the CSS code by selecting Show advanced configuration options at the bottom of the Styles tab, and then selecting the View and edit CSS option.
10. Select Save.  
    Your page refreshes and displays the changes made to the layout.
11. Add components to your page.  
    See [Add and configure components](https://servicenow-prod.fluidtopics.net/cbYaV7wlkZDBulAnOqnPNA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.") for more information.
12. View and test your page by selecting ![Preview button that opens the page variant.]().

## Create a CSS Grid layout with the old layout system {#ariaid-title3}

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.

### Antes de Iniciar

Role required: admin

### Por Que e Quando Desempenhar Esta Tarefa

In the following procedure, you learn how to use CSS Grid to modify your CSS to
customize the layout of your page.

### Procedimento

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. [Create a page in UI Builder](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.") or open a page.
4. Click the Layout tab and choose the two-row by two-column layout.  
   Figura 2. Standard two-row, two-column layout
5. Click Edit layout code.  
   Figura 3. Edit the layout code
6. Expand the code editor so that you can easily view the CSS code.  
   Figura 4. Expand the code editor
7. Add another slot to the layout by copying the CSS code for an existing slot.  
   Copying the CSS code is easier than typing it into the layout.
   Figura 5. Copy the CSS code for a slot
8. Paste the CSS code below the code that you copied and change the slotName and grid-area to a unique value.  
   Figura 6. Paste the CSS code
9. Modify the layout rules to include the new column and template area, as follows:
   1. Delete the `"Grid-template-columns": "1fr 1fr",` line.
   2. Add a second <kbd class="ph userinput">cell1</kbd> after <kbd class="ph userinput">cell1</kbd>, and then add <kbd class="ph userinput">cell5</kbd> after <kbd class="ph userinput">cell4</kbd>.

   Figura 7. Modify the layout rules

   You can set many different configurations. In this example, there are the two
   resulting grids from two different grid template areas. The
   "grid-template-areas" property being modified is setting
   the CSS property of the same name. For more information, see [MDN grid-templates-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).
   Figura 8. Grid template areas
10. Collapse the expanded view, and then click Apply.  
    Figura 9. Apply a layout change
{#create-a-css-grid-layout__steps_acx_kmr_qpb}

### Resultado

The new CSS Grid layout shows that the new slot was added to the original two-row, two-column layout.Figura 10. New custom layout  
Click Reset to original to reset the layout changes back to the original at any time. Figura 11. Reset a layout
**Tarefas relacionadas**   

* [Create a Flexbox layout with the old layout system](https://servicenow-prod.fluidtopics.net/It3Jik7AnTlUgu3~x_s8Qg#flexbox-uib-old-layout "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.")