Examples
5 column based grid.
1-5
2-5
3-5
4-5
5-5
12 column based grid.
1-12
2-12
3-12
4-12
5-12
6-12
7-12
8-12
9-12
10-12
11-12
12-12
Mixed cells in a 12 column grid.
3-12
4-12
2-12
1-12
1-12
10-12
6-12
1-12
1-12
1-12
1-12
1-12
1-12
4-12
4-12
4-12
Automatic floating.
2-12
4-12
5-12
1-12
9-12
5-12
6-12
1-12
2-12
12-12
4-12
4-12
4-12
4-12
4-12
4-12
Responsive options.
The grid system allows to have different amounts of columns based on the breakpoint definition. Additionally hide and linebreak may be activated for certain cells in certain breakpoints. Resize the window to see how grid cells behave on the different breakpoints.
#1
#2
#3
hide (phone)
newline (tablet)
Nested grid.
HTML/CSS Usage
Base Markup
<div class="aem-Grid aem-Grid--12">
<div class="aem-GridColumn aem-GridColumn--default--4"></div>
<div class="aem-GridColumn aem-GridColumn--default--4"></div>
<div class="aem-GridColumn aem-GridColumn--default--4"></div>
</div>
Configure CSS output
@import (once) "grid_base.less";
@max_col: 12; /* maximum amount of grid cells */
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}
/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}