Grid Layout

Here we will explain how the grid system works.

In First Spirit, we use the familiar 12 columns grid layout to arrange our components. Not all components can be placed outside a grid system, but we will explain this in more detail in the chapter Components.

As soon as you created a new page (explained in the chapter Creating a new page) it's time to fill the empty page with components. A grid facilitates this process. To add a grid you have to click on the three dots next to content and add the grid container.

Afterwards you are free to place the components within the grid container. Please Notice: In WCMS you had to think in Columns when you were positioning your components in one Grid. In FirstSpirit this has changed and you have to think in rows when you are positioning your components in a Grid.

The grid system in FirstSpirit consists of a series of horizontal and vertical lines that intersect to form a set of columns and rows. This structure provides a framework for organizing and aligning content elements on your pages. The grid system offers flexibility in terms of content placement and arrangement. You can adjust the layout by resizing and repositioning content elements within the grid.

You can adapt the Layout of the components within a Grid Container via the Col Span, Row Span & Order:

[1] Mobile: Col Span = 4 or 2, Row Span = 1 to 6, Order = ORDER_FIRST to ORDER_LAST

[2] Tablet: Col Span = 2 to 8, Row Span = 1 to 6, Order = ORDER_FIRST to ORDER_LAST

[3] Laptop: Col Span = 2 to 12, Row Span = 1 to 6, Order = ORDER_FIRST to ORDER_LAST

[3] Desktop: Col Span = 2 to 12, Row Span = 1 to 6, Order = ORDER_FIRST to ORDER_LAST

Col Span: This attribute is used within HTML table elements to specify the number of columns a cell should span horizontally. For example, if a cell has a colspan of 2, it means that the cell will extend across two columns in the table.

Row Span: Similar to colspan, rowspan is used within HTML table elements to specify the number of rows a cell should span vertically. If a cell has a rowspan of 3, it means that the cell will extend vertically to cover three rows in the table.

Order: Defines the specific positioning and arrangement of content elements within the grid system. Allows to assign a numerical value to content elements, determining their placement within the grid layout. This ensures that content components are displayed in a specific order on your page.

A detailed explanation can also be found under Component Placement.

last updated: 01/25