Part of the core of the Leaf UI.
Pure CSS 12-column, responsive mobile-first grid.
It leverages the flexbox spec to generate a lightweight and portable grid that can be used in any web project.
We recommend using Bower to manage front-end dependencies:
bower install leaf-grid
If you don't use bower you can manually use it by just grabbing the file inside the
Also available on NPM:
npm install leaf-grid
leaf-grid is a grid based on flexbox so the browser must support that. Check the browser support section for details.
We kept the grid very simple with no fancy features you may find elsewhere. You have twelve columns to use and no gutters.
0.2.0 gutters are now part of
leaf-grid! Beware that
lf-grid__box is now deprecated.
The simple grid
First let's see how it's like to create a simple 50/50 grid:
First halfSecond half
OK, so let's explain that:
Every grid must be declared with class
.lf-grid. By doing so, you are turning your div into a
Inside your grid you can put
columns. They are responsible for organizing things inside the grid. Each column occupies an amount of space in the grid.
As you can see in the above example, column shards go by
-- represent a modifier in BEM so that is saying that you want 6 from the 12 columns available. In other words, 50% of the total grid space.
To ask for a space in the grid you use the pattern
-- and your modifier.
The unbalanced grid
The next example uses all the knowledge from before to create an unbalanced grid:
<!-- Asking for 75% of grid space 8/12 -->75%<!-- Asking for 25% of grid space 4/12 -->25%<!-- Asking for 100% of grid space 12/12 -->100%
OK, so now the grid will inline the first two columns, but then it has no more space left. So it will create a new line to render the rest of the grid.
Sometimes you don't want to calculate the numbers manually when distributing your columns.
In these cases you can use the special modifier
Then you can tell
leaf-grid to automatically fit your content in the remaining column space available. Be aware that the minimum space you have is still 1-12.
<!-- Asking for 25% of grid space 4/12 -->25%<!-- Give all the space you have left to fit -->75%
leaf-grid is even more useful when you design your pages mobile-first, design pages to look good on the smaller viewport you plan to support and then just enhance from there.
The default column modifiers you saw so far work on mobile and beyond, but what about changing the UI behavior in a bigger screen?
There are special modifiers that can be used to target specific viewport ranges.
We have 5 pre-defined breakpoints:
- The default
.lf-grid__col--*, where * is the column space modifier as you already know. This applies to any screen size.
.lf-grid__col--sm-*is the small breakpoint for large smartphones and small tablets screens.
lf-grid__col--md-*is the medium breakpoint for tablets.
lf-grid__col--lg-*is the large breakpoint for landscape tablets and desktops.
lf-grid__col--xl-*is the extra large breakpoint for wide desktops and TVs.
Knowing that you can mix and match those special modifiers to create a responsive experience.
Home<!-- Give all the space you have left to fit -->InfoContactAbout
Notice that as the grid is mobile first the larger the breakpoint you set will apply for all the screen sizes above that breakpoint.
That's why when you don't set any special modifier the column space will be equal across any size.
One of the cool things about flexbox grids is that they don't care about flow direction.
You can just turn any grid into a vertical grid using the special grid modifier
<!-- Asking for vertical grid --><!-- Asking for 25% of vertical grid space 4/12 -->25%<!-- Give all the space you have left to fit -->75%
Other special modifiers for the grid
Besides creating vertical grid there are more things you can do to make the grid just like you want.
You can, for example, set the grid start at the center. So that any column is filled from the inside.
I'm on the horizontal center of the grid!
But, what if you want to center things vertically? No problem, there's another special modifier for that. It's called
.lf-grid--cross-center. In fact it's called cross-center because it will always center views in the opposite direction of the grid.
If the grid is horizontal it will center vertically and if the grid is vertical it will center horizontally.
I'm on the vertical center of the grid!
If you want your grid to start from the right instead of starting from the left you can use
I'm on rightI'm on left
Sometimes you'll want the grid columns to expand to fill the space remaining in the parent element.
.lf-grid--stretch modifier and your grid will expand vertically if it is a horizontal grid and horizontally if it is a vertical grid.
100% of parent height on this DIVs100% of parent height on this DIV
The special column modifiers
There are some column modifiers you can use to change behavior of one specific part of the grid.
Say you want to center just one part of the grid, you can do that with the
.lf-grid__col--center modifier. This way you can have the effect of
.lf-grid--cross-center in just one column.
Let's take a look:
I'm on TOPI'm on CENTER!I'm on TOP
Column at the end
Much like centering you can specify a column to start at the end them act like a stack. Piling up elements from bottom to top.
I'm on TOPI'm on BOTTOM!I'm on TOP
There are a bunch of scripts that are meant to be read from right to left. So any universal grid should consider the compatibility with RTL.
Fortunately, in this grid you don't have to do anything to support RTL. The grid will automatically shift when viewed in RTL.
<!-- Forcing RTL with `direction: rtl;` for testing -->I'm on rightI'm on left
Actually this is a column modifier but it gets it's own section because it is really special and should be use with caution.
.lf-grid__col--important modifier lets you specify that some column shards are more "important" that others and should appear first, regardless of the original HTML ordering.
I'm secondI'm firstI'm third
0.2.0 the project support the usage of gutters. Previously we used box to simulated gutter behavior but turns out that's not that useful since you can have fairly complex usability in grids.
So now to use gutters you just have to declare your
lf-grid with the
with-gutter modifier. Your columns will follow automatically.
1/2 with gutter1/2 with gutter
Notice that this new implementation removes the space on the border of the grid, thus allowing you to have consistent spacing across the whole page.
You can see
leaf-grid in action by cloning and running the built-in demo located on the
We test support on most evergreen browsers with Sauce Labs.