Grid system

Flexy is a grid system and a general purpose layout tool based on Flex. It can be used to build page level layout as well as component level one. It is why it is not called "grid" but "flexy".

Get started

Import


@import 'settings-tools/all-settings';
@import 'layouts/l.container'; // you generally want the container as well
@import 'layouts/l.flexy';

How it works

The example below creates four equal-width columns at small, medium, large, and extra large breakpoints using our predefined grid classes.

Container rules

ml-container defines the overall grid context at the top level and applies the proper margin and our default max-width. You can also remove this max width, by using the grid modifier class ml--container--fluid. See the default container.

Columns

ml-flexy__col defines individual columns inside the grid. With Flexbox columns widths are set in percentages relative to their parent element so columns without a specific width will automatically be equal. For example, four instances of ml-flexy__col will give you four equal width columns — each 25% of the parent from the small breakpoint on up.

Gutters

In most cases, you will need gutters.

When used with gutters, .ml-flexy uses the negative margin pattern: each column as a padding measuring half a gutter width, and the containing .ml-flexy as a negative margin equal to half a gutter width on both sides as well.


<div class="ml-flexy ml-flexy--gutter">
  <div class="ml-flexy__col">col 1</div>
  <div class="ml-flexy__col">col 2</div>
</div>

Tokens

Token name	Description	Value
`size.gutter.screen.s`	The gutter width for smallest devices and up	`1mu` 16px
`size.gutter.screen.m`	The gutter width for screen `m` and up	`2mu` 32px

Reminder: mu = MagicUnit. Ex: 3.5mu = MagicUnit * 3.5

Columns options

Widths

You can apply specific columns width using .ml-flexy__col modifiers:

Modifier	Width
`.ml-flexy__col--1of12`	8.3333%
`.ml-flexy__col--1of6`	16.6666%
`.ml-flexy__col--1of4`	25%
`.ml-flexy__col--1of3`	33.3333%
`.ml-flexy__col--1of2`	50%
`.ml-flexy__col--2of3`	66.6666%
`.ml-flexy__col--3of4`	75%
`.ml-flexy__col--5of6`	83.3333%
`.ml-flexy__col--11of12`	91.66666%
`.ml-flexy__col--initial`	width of the column content
`.ml-flexy__col--fill`	fill the available width
`.ml-flexy__col--full`	100%

Responsive modifiers

Apply widths to breakpoints using the @from-XX suffix to the widths modifiers.

The available breakpoints modifiers are:

Modifier	Breakpoint	Corresponding device
`ml-flexy__col--[size]` (no modifier)	From 0px and up	Mobile / All
`ml-flexy__col--[size]@from-m`	m: From 680px and up	Fablet / Small tablet and up
`ml-flexy__col--[size]@from-l`	l: From 1024px and up	Landscape tablets, laptops
`ml-flexy__col--[size]@from-xl`	xl: From 1280px and up	Laptops (depending on settings)
`ml-flexy__col--[size]@from-xxl`	xxl: From 1920px and up	Desktop

Alignment

You can align columns in a ml-flexy using the ml-flexy--items-[xxx] modifiers.

Available modifiers are:

Modifier	Value	Behavior
default (no modifiers)	align-items: flex-start	Top alignment
`ml-flexy--items-end`	align-items: flex-end	Bottom alignment
`ml-flexy--items-center`	align-items: center	Vertically centered
`ml-flexy--items-start`	align-items: flex-start	Top alignment
`ml-flexy--items-stretch`	align-items: stretch	All columns use the same height

Pushing a column to the left

You can push a column using the ml-flexy__col--push-[XofY] modifiers.


<div
  class="
  ml-flexy__col
  ml-flexy__col--1of3
  ml-flexy__col--push-1of3"
>
  <!-- column content -->
</div>

All columns widths (numerical) are available as push values from 1of12, 1of6, 1of4 ... to 11of12.

Responsive push modifiers

Apply widths to breakpoints using the @from-XX suffix to the width modifiers.

The available breakpoints modifiers are:

Modifier	Breakpoint	Corresponding device
`ml-flexy__col--push-[size]` (no modifier)	From 0px and up	Mobile / All
`ml-flexy__col--push-[size]@from-m`	m: From 680px and up	Fablet / Small tablet and up
`ml-flexy__col--push-[size]@from-l`	l: From 1024px and up	Landscape tablets, laptops
`ml-flexy__col--push-[size]@from-xl`	xl: From 1280px and up	Laptops (depending on settings)
`ml-flexy__col--push-[size]@from-xxl`	xxl: From 1920px and up	Desktop

Reset pushed modifiers

For a specific a breakpoint you can reset the pushed column using mc-flexy__col--push--reset@from-XX.


<div
  class="
  ml-flexy__col
  ml-flexy__col--1of12
  ml-flexy__col--push-1of12@from-l 
  ml-flexy__col--push-reset@from-xl
"
>
  <!-- column content -->
</div>

Nesting flexy grids

You can either nest flexy grids by creating a new .ml-flexy grid inside a column, or by directly applying a .ml-flexy class on a .ml-flexy__column element.

Columns order

Use the ml-flexy__col--last and ml-flexy__col--first modifier to reorder columns.

Use flexy to center vertically and horizontally

Use the ml-flexy--space-around and the ml-flexy--items-center modifier on a ml-flexy element to center vertically and horizontally elements.