Tutorial n°5 : Style your project from Figma design

Step 2 : Integrate Grids

Now that you have your emply application, it's time to set up the layout : How the elements will be displayed in the page. Let's quickly recall what we have :

- A title and a subtitle
- Two input text fields
- A button

Let's create grids : we have four blocks, so 4 Grid Rows of 25% each :

In your project, go to Application -> NgxApp
-> Pages -> Page -> Content then click it and search for the "Grid" component in the Palette.

When dragging the Grid component to the App Viewer window, choose "inside". Then display the grid borders : To do so, click the "Show all grids or current selected" button located next to the app viewer (the last icon in the vertical toolbar).

Here you don't need the right/left column, so just delete the "GridCol1" in the Treeview.
Set up the "GridRow" height to 25% in the GridRow properties -> Height.

Then you simply will have to duplicate this GridRow 4 times in the Grid (right click on the GridRow-> Copy, then right click on the main Grid and choose Paste "as a child" in the Grid)

The page is now splitted in 4 equal blocks, where you will add your page components.
Success !

You successfully completed this step, please click the Next Step button to go to next tutorial step
Close
You did not complete all the actions required in this step, are you sure you want to go to the next step ?