The Ensemble grid system comprises of an outer container, an inner row, then the required amount of columns. The grid is based on a 12 column system (This can be changed in the SCSS config file, on a global or theme basis).
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11
Once you have added the container, and row, you can then add the columns that give you your layout, in this example we will use a couple of 6 column areas to create 2 columns of equal size.
<div class="grid-container">
<div class="grid-row">
<div class="column-6">...</div>
<div class="column-6">...</div>
</div>
</div>
The Ensemble grid is capable of nesting columns inside other columns, allowing for more intricate layouts.
<div class="grid-container">
<div class="grid-row">
<div class="column-6">
</div>
<div class="column-6">
<div class="grid-row">
<div class="column-4">...</div>
<div class="column-4">...</div>
<div class="column-4">...</div>
</div>
</div>
</div>
</div>
The example above would give you a layout that looks like this:
6
4
4
4
By default the Ensemble grid will stack when the screen is resized to its medium breakpoint, which kicks in when the screen is at or below 48em. You can see this in action by reducing the size of your browser window. It is possible to override this behavior on a per column basis, by adding the appropriate class.
By adding the "column-md-6" class we are telling the grid to retain the 6 column status when the medium breakpoint is reached.
<div class="grid-container">
<div class="grid-row">
<div class="column-6 column-md-6">
</div>
<div class="column-6 column-md-6">
</div>
</div>
</div>
Now if you resize your browser you will notice that both columns will now retain their 6 column width when the medium breakpoint of 48em is reached.
6
6
To help you create more challenging layouts, and place columns where you need them, Ensemble lets you push columns by the value of any other column.
12
10
8
6
4
Here you can see the markup for the example above, each area has been pushed into the center of a row, by using the appropriate push class.
<div class="grid-container">
<div class="grid-row">
<div class="column-10 push-column-1">
</div>
<div class="column-8 push-column-2">
</div>
<div class="column-6 push-column-3">
</div>
<div class="column-4 push-column-4">
</div>
</div>
</div>
If you are using SASS/SCSS to modify your theme, you can set a number of options relating to the grid system. these options can be found at /sass/helpers/_config.scss. If you have overridden the core, and are using a theme, the grid options can be found at /themes/theme/_theme-config.scss.
$grid-columns: 12;
$grid-width: 100%;
$grid-container-width: 1100px;
$breakpoint-large: "(max-width: 64em)";
$breakpoint-medium: "(max-width: 48em)";
$breakpoint-small: "(max-width: 34em)";
$breakpoint-xsmall: "(max-width: 25em)";