The grid system in Freelancer is a 12 column based Flexbox grid system. It’s fully responsive using a mobile first approach.

All fl-col should be wrapped inside fl-grid. Components or contents must be placed inside the columns and only columns may be the immediate children of fl-grid.

fl-col properties' value indicate the number of columns you'd like to use out of the possible 12 columns per row. So if you want four equal-width columns accross, you may pass a value of "4".

To make it responsive, you can make use of fl-col's four breakpoints ([col], [colTablet], [colDesktopSmall], and [colDesktopLarge]) which is based on minimum media queries width applying to that breakpoint and all those above it. For example, Setting [col]="12" will make the fl-col's width to 100% of the grid on mobile and adding [colTablet]="6" with it will make the width 50% of the grid from tablet(768px) viewport and above.

[colTablet]: 768px;

[colDesktopSmall]: 960px;

[colDesktopLarge]: 1200px;

Use fl-grid alignment properties to vertically and horizontally align columns.

Use [colOrder], [colTabletOrder], [colDesktopSmallOrder], [colDesktopLargeOrder] property for controlling visual order depending on the viewport.

Move columns to the right or left using [pull] properties.