Using grids
We used grids when talking about landing pages. Grids are a powerful tool when dealing with content columns. Yes, there is a similarity between tables and grids, but let's think of grids as a composition tool, whilst tables are showing data tools.
The default grid creates 16 columns. When adding columns, you can specify how many grid columns you want to use for a single column. In the example, one column takes 4, the other 12,
Join
4 + 12 = 16. We added stackable to make the grid responsive, that is, on small screen devices, the columns will stack, taking each full width.
Community
Join our community and subscribe to the mail lists, announcements and access our projects.
@w{grid(class=stackable)}
@w{column(class=four wide)}
%icon-purple massive users%
@w{/column}
@w{column(class=twelve wide middle aligned)}
@w{header}
Community
@w{subheader}
Join our community and subscribe to the mail lists, announcements and access our projects.
@w{/subheader}
@w{/header}
@w{button(class=primary,link=#,text=Join)}
@w{/column}
@w{/grid}
When adding columns, if the total row's size is fulfilled, the grid will automatically add the columns in a new row. The example uses a
height column grid.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@w{grid(class=height column center aligned)}
@w{column}1@w{/column}
@w{column}2@w{/column}
@w{column}3@w{/column}
@w{column}4@w{/column}
@w{column}5@w{/column}
@w{column}6@w{/column}
@w{column}7@w{/column}
@w{column}8@w{/column}
@w{column}9@w{/column}
@w{column}10@w{/column}
@w{column}11@w{/column}
@w{column}12@w{/column}
@w{column}13@w{/column}
@w{column}14@w{/column}
@w{column}15@w{/column}
@w{column}16@w{/column}
@w{/grid}
You can also force new rows, handy when creating a
centered grid. In the example, we create a grid with 3 columns. But we'll not use them, instead, we'll force new rows.
@w{grid(class=three column centered)}
@w{row}
@w{column}%icon-blue massive users%@w{/column}
@w{/row}
@w{row}
@w{column}%icon-blue massive users%@w{/column}
@w{column}%icon-blue massive users%@w{/column}
@w{/row}
@w{/grid}
Columns can use their own alignment, horizontally (
left/center/right aligned) and vertically (top/middle/bottom aligned). Notice that grids can also be celled, showing its borders.
Aligned to the left.
Center aligned.
Aligned to the right.
@w{grid(class=three column celled)}
@w{column(class=left aligned)}
Aligned to the left.
@w{/column}
@w{column(class=center aligned)}
Center aligned.
@w{/column}
@w{column(class=right aligned)}
Aligned to the right.
@w{/column}
@w{/grid}
Cells can also use framework colors. If you prefer system colors, have in mind that grids' cells are transparent, if inside a stripe with a background color, that would be the cell's background color. Same if the stripe uses an image as background. If you want an individual cell, use a stripe inside.
Yellow
Olive
Black
@w{grid(class=three column center aligned)}
@w{column(class=yellow)}Yellow@w{/column}
@w{column(class=olive)}Olive@w{/column}
@w{column(class=black)}Black@w{/column}
@w{/grid}
Alignment
We used grid alignment in very different ways. You should be aware about the meaning of these alignments, because they became more important when the columns contain backgrounds. The table contains the complete set.
class |
Description | Scope |
|---|---|---|
| centered | Centers horizontally the column itself | table |
| left/center/right aligned | Horizontally aligns the column content | table for all columns, trow for columns in a row, tcol for a specific column |
| top/middle/bottom aligned | Vertically aligns the column content | table for all columns, trow for columns in a row, tcol for a specific column |
| English | 07/18/26 05:41 | Lluís Turró Cutiller | |
| English | 07/20/26 07:28 | Lluís Turró Cutiller | |
| English | 07/23/26 08:37 | Lluís Turró Cutiller |
