Grid mixins

Grid Mixins are applied to children elements where the parent element is set with:

In the following examples, the HTML structure is set up with a parent div and 13 children divs. The parent element has the following mixin applied which sets a 6 column grid, with 4px gap, 2 rows with a height of 50px:

1#grid.column(@type, @start, @end);

Grid item mixins currently support columns and rows, where you can define how the grid items are displayed within the grid. In the following examples the first child div has these mixins applied to it. The Grid Item column default will start at column 1 and end at column 13.

1#grid.column(1, 7);

You can customize your start / end points by specifying them. Lets say we want to start at column 2 and end at column 8:

1#grid.column(2, 4);

An alternative way to set a grid item element to span across all columns is to set the first parameter to 'horizontal' so the element starts at column 1 and ends at -1 which is the last column.

1#grid.column(horizontal);

To span a column we can use the span type. By default it will start at column 1 and span across 12 columns.

1#grid.column(span);

You can speicfy the start columns and the amount of columns you want to span by. Lets start at column 2 and span across 3 columns:

1#grid.column(span, 2, 3);

When designing responsive sites we may have columns stacked on top of eachother on mobile devices, and beside eachother on tablet devices and desktop screens. The responsive type grid column mixin can be used to span across all columns on mobile viewports and span across a set number of columns on tablet and desktop viewports. By default it will span 2 columns.

 

Note: To see the responsive effect you will need to resize your browser viewport

1#grid.column(responsive);

To specify the start column and amount to span the element by, pass the values in as parameters. Lets start at column 6 and span 4:

1#grid.column(responsive, 2, 4);

1#grid.row(@type, @start, @end);

We can also specify the row start / row end like this: Default will start at row 1 and end at row 2

1#grid.row();

To set the desired start and end values, pass them in as parameters.

1#grid.row(1, 3);

To span rows use the span parameter. By default it will start at row 1 and span 2 rows.

1#grid.row(span);

To set desired span values pass in the start row and the amount of rows to span as parameters. This example starts at row 2 and spans 2 rows

1#grid.row(span, 2, 2);

To set the grid item to span from the first row to the last row use the vertical parameter.

1#grid.row(vertical);