Grid System
Overview
We create a 24-column and fully responsive grid system with wrapping containers, grids, responsive utility and typical layouts with a lot of predefined classes, which could help you implement most kind of layouts (if not all). It's built with flexbox, which support IE 10+. Therefore, you are at the right place if you are looking for a responsive grid system for modern browsers.
If you are unfimiliar with flexbox, read through flex on MDN first.
The media query breakpoints is based on the research on WebDimensions, which statistic most of the devices world wide. We set media breakpoints as follows.
Extra small | Small | Medium | Large | Extra large | |
---|---|---|---|---|---|
Label | xs | sm | md | lg | xl |
Media breakpoints | min-width: 0 | min-width: 768px | min-width: 992px | min-width: 1264px | min-width: 1580px |
Containers
We provide fixed-width and fluid-width containers. Fixed-width container
has a restrict width with max-width
, which changes according to media breakpoints. Fluid-width container-fluid
will keep 100% wide on all devices. We add 20px
padding
on containers, which could be overwritten by custom classes. Even sometimes you may find out you don't need a container since row takes up 100% wide of its parent.
Extra small | Small | Medium | Large | Extra large | |
---|---|---|---|---|---|
Media breakpoints | min-width: 0 | min-width: 768px | min-width: 992px | min-width: 1264px | min-width: 1580px |
Container max-width | none | 740px | 960px | 1180px | 1480px |
<div class="container flex basic-row">
<div class="xs">
<div class="block--blue">container</div>
</div>
</div>
<div class="container-fluid flex basic-row">
<div class="xs">
<div class="block--green">container-fluid</div>
</div>
</div>
Be aware that nesting container
or container-fluid
doesn't work.
Grids
We build up the grid system with flexbox, which makes the grids flexible and magical. In the grid system, flex container and item are the two basic components. By default, the flex container justify flex items at the start in horizontal direction and wrap flex items to the newline if overflow.
We provide three kinds of flex items:
xs sm md lg xl
: flex item that auto grows and shrinks.xs-fit sm-fit md-fit lg-fix xl-fit
: flex item that just fit its content without growing and shrinking. You could setwidth
for the flex item.xs-*[1,24] sm-*[1,24] md-*[1,24] lg-*[1,24] xl-*[1,24]
: flex item with fixed width in percentage.
<div class="flex basic-row">
<div class="xs">
<div class="block--blue">xs</div>
</div>
<div class="xs">
<div class="block--green">xs</div>
</div>
</div>
<div class="flex basic-row">
<div class="xs-fit">
<div class="block--green">xs-fit</div>
</div>
<div class="xs-fit" style="width: 300px">
<div class="block--blue">xs-fit with 300px width</div>
</div>
</div>
<div class="flex basic-row">
<div class="xs-12">
<div class="block--blue">xs-12</div>
</div>
<div class="xs-12">
<div class="block--green">xs-12</div>
</div>
</div>
xs
must be the direct child of flex
, similar to flex container and flex item.
xs
will take up equally distributed space in flex
, but they will auto self-adjust when adding or removing sibling items.
xs-fit
could make the item fit the content precisely, which will not take up any extra space. You could set width
to col-fit
such that it will take up fixed-width space. If no width
provided, xs-fit
will grow and shrink with the content.
xs-*[1,24]
set the flex item to fixed width in percentage.
xs-offset-*
are adjust item offset to the left. When using xs-offset-*
, you must not set margin
in CSS, since they are implemented with margin
and will be overwritten.
We recommend that you should seperate layouting from your content, so be careful if you change layouting style on flex
and xs
directly.
Responsive layout
Responsiveness allow you to implement different layouts for multiple devices, as grids will auto adjust according to media query. Technically we follow the mobile first design pattern in responsive implementation, which means the layout for larger devices will overwrite the one for smallers.
<div class="flex basic-row">
<div class="xs-12 sm-8 md-16 lg-12 xl-8">
<div class="block--blue">
xs-12 sm-8 md-16 lg-12 xl-8
</div>
</div>
<div class="xs-12 sm-16 md-8 lg-12 xl-16">
<div class="block--green">
xs-12 sm-16 md-8 lg-12 xl-16
</div>
</div>
</div>
Responsive item are designed from small devices and up, e.g., xs-24
occupy 24 grids on extra small devices and up, sm-20
will overwrite the width on small devices and up, and so on. Combining different responsive column classes is a common and effective solution in responsive web.
Gutter
Gutter could be implemented with spacing util class, but we must add negative margin to compensate for the padding of first and last flex items.
<div class="flex basic-row mx-lg-n20">
<div class="lg px-lg-20">
<div class="block--blue">lg gutter</div>
</div>
<div class="lg px-lg-20">
<div class="block--blue">lg gutter</div>
</div>
</div>
If gutter causes overflow and the scrollbar shows up in some browsers, add a wrapper <div class="overflow-x-hidden"><div>
to fix it.
Nested Layout
Nested layout is also another basic usage in web development. You could nest flex
and xs
to any level deep, but be awera that do not nested containers
.
<div class="flex basic-row block--bordered">
<div class="xs-24">
outer layout
</div>
<div class="xs-24 flex">
<div class="xs">
<div class="block--green">outer grid</div>
</div>
<div class="xs flex basic-row block--bordered">
<div class="xs-24">
inner layout
</div>
<div class="xs-24 flex">
<div class="xs">
<div class="block--blue">inner grid</div>
</div>
<div class="xs">
<div class="block--green">inner grid</div>
</div>
</div>
</div>
</div>
</div>
</div>
Notice that an element could be a flex item and a flex container meanwhile.
Mixed grids
Feel free to mix three kinds of flex items in flex container, e.g. mix xs-*[1-24]
with xs
, mix xs-*[1-24]
with xs-fit
, mix xs
with xs-fit
<div class="flex basic-row">
<div class="xs-8">
<div class="block--blue">xs-8</div>
</div>
<div class="xs">
<div class="block--green">xs</div>
</div>
</div>
<div class="flex basic-row">
<div class="xs-8">
<div class="block--blue">xs-8</div>
</div>
<div class="xs-fit">
<div class="block--green">xs-fit</div>
</div>
</div>
<div class="flex basic-row">
<div class="xs">
<div class="block--blue">xs</div>
</div>
<div class="xs-fit">
<div class="block--green">xs-fit</div>
</div>
</div>
Perhaps mixed grids will solve your layouting issues sometimes.
Direction
We provide utility classes to change flexbox direction.
row
: set the direction to horizontalcolumn
: change the direction to verticalreverse
: change the direction to reverse(horizontally or vertically)
By default flex direction is row
Change flex direction to column
Change flex direction to row-reverse
Change flex direction to column-reverse
<p>By default flex direction is row</p>
<div class="flex basic-row column">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-8">
<div class="block--green">xs-8</div>
</div>
</div>
<p>Change flex direction to column</p>
<div class="flex basic-row column">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-8">
<div class="block--green">xs-8</div>
</div>
</div>
<p>Change flex direction to row-reverse</p>
<div class="flex basic-row row reverse">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-8">
<div class="block--green">xs-8</div>
</div>
</div>
<p>Change flex direction to column-reverse</p>
<div class="flex basic-row column reverse">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-8">
<div class="block--green">xs-8</div>
</div>
</div>
row
column
reverse
must be applied to flex
, otherwise they will not work.
column
will not work in IE, as explained in flexbugs #14. Besides there are some other bugs related to flex-direction: column
. Our suggestion is do not use column
if your website supports IE.
Wrapping
We provide utility classes for wrapping flex items. By defualt flex
will wrap flex items to newline if overflowing. You could add no-wrap
if neccesary.
wrap
: wrap the columns when overflowingno-wrap
: unwrap the columns when overflowing
flex wrap
flex no-wrap
<p>flex wrap</p>
<div class="flex basic-row">
<div class="xs-16">
<div class="block--blue">xs-16</div>
</div>
<div class="xs-20">
<div class="block--green">xs-20</div>
</div>
</div>
<p>flex no-wrap</p>
<div class="flex basic-row no-wrap" style="overflow: hidden">
<div class="xs-16">
<div class="block--blue">xs-16</div>
</div>
<div class="xs-20">
<div class="block--green">xs-20</div>
</div>
</div>
no-wrap
must be added to flex
.
Alignment
We provide utility classes for alignment flex items. By default flex items are aligned at the start in the main and cross aixs
justify-content-start
: align items at the start in main axisjustify-content-center
: align items at the center in main axisjustify-content-end
: align items at the end in main axisjustify-content-between
: align items with space-between in main axisjustify-content-around
: justify columns with space-aroundalign-items-start
: align items at flex start in cross axisalign-items-center
: align items at the ceter in cross axisalign-items-end
: align items at the end in cross axisalign-self-start
: align itself at the start in the cross axisalign-self-center
: align itself at the center in the cross axisalign-self-end
: align itself at the end in the cross axis
justify content at the start
justify content at the center
justify content at the end
justify content space-between
justify content space-around
align items start
align items center
align items end
<p>justify content at the start</p>
<div class="flex basic-row justify-content-start">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green">xs-4</div>
</div>
</div>
<p>justify content at the center</p>
<div class="flex basic-row justify-content-center">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green">xs-4</div>
</div>
</div>
<p>justify content at the end</p>
<div class="flex basic-row justify-content-end">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green">xs-4</div>
</div>
</div>
<p>justify content space-between</p>
<div class="flex basic-row justify-content-between">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green">xs-4</div>
</div>
</div>
<p>justify content space-around</p>
<div class="flex basic-row justify-content-around">
<div class="xs-4">
<div class="block--blue">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green">xs-4</div>
</div>
</div>
<p>align items start</p>
<div class="flex basic-row align-items-start" style="height: 100px">
<div class="xs-4">
<div class="block--blue" style="height: 40px">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green" style="height: 60px">xs-4</div>
</div>
</div>
<p>align items center</p>
<div class="flex basic-row align-items-center" style="height: 100px">
<div class="xs-4">
<div class="block--blue" style="height: 40px">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green" style="height: 60px">xs-4</div>
</div>
</div>
<p>align items end</p>
<div class="flex basic-row align-items-end" style="height: 100px">
<div class="xs-4">
<div class="block--blue" style="height: 40px">xs-4</div>
</div>
<div class="xs-4">
<div class="block--green" style="height: 60px">xs-4</div>
</div>
</div>
these classes should be along with flex
.
Spacing
We also provide spacing classes for slight adjustment, including margin and padding. We find them helpful though it's easy to implement. These classes will be applied in the format ${property}${direction}-${label}-${value}
.
property
types:
m
: marginp
: padding
direction
types:
a
: allx
: left and righty
top and bottomt
: topb
: bottoml
: leftr
: right
label
types:
xs
sm
md
lg
xl
values
: auto 0 2 5 10 15 20 25 30 40 50.
ma-xs-10
will apply margin: 10px
for the content on small devices and up while px-10
will apply padding-left: 10px
and padding-right: 10px
.
As demonstrated in flexbugs #15, there are bugs for my-xs-auto
and ma-xs-auto
in cross axis in IE. If you need align-center, use align-items-center
instead of my-auto
.
In reality, try to avoid applying margin-top
, because it will lead to unpredictable layout. Instead, apply margin-bottom
.
Hidden
Classes for hidding content. hidden
will hide the content for all devices and hidden-xx
will hide the content when media query meets the viewport dimension.
- hidden
- hidden-xs-only
- hidden-sm-only
- hidden-sm-down
- hidden-sm-up
- hidden-md-only
- hidden-md-down
- hidden-md-up
- hidden-lg-only
- hidden-lg-down
- hidden-lg-up
- hidden-xl-only
Overflow
Classes for overflow
overflow-hidden
:overflow: hidden
overflow-x-hidden
:overflow-x: hidden
overflow-y-hidden
:overflow-y: hidden
Symmetric Layout For Arabic Websites
For Arabic websites, flexbox will reverse the layout and content symetrically. We also provide symmetric layout class e.g. offset-ar-*-*
such that the layout does not break down. But avoid to apply ml-*-*
and mr-*-*
if your website serve content for Arabic countries.
Browser Compatibility
Chrome, Firefox, Safari, IE10+, Edge
There are still some bugs for IE & Safari, as they are explained and demonstrated in flexbugs. We are still working on them.