Introduction
Why another grid ?
Almost all current grid systems are based on the display inline-block CSS property or on floating elements. There are several problems and limitations with this approach. For example it is not possible to easily make columns of the same height or vertically aligning column content. So here is a grid based on the display table property which making some kind of magic ;-)
Compatibility
You can use this grid system with all browsers that are compatible with CSS 2.1. In practice it covers almost all browsers except Internet Explorer below version 8. You can get more information on caniuse.
If you want the grid to be responsive in IE8 you must include a polyfill like Respond.js to support media queries. This operation is not necessary for other browsers, only CSS is needed.
Which version do you need?
This grid comes in three flavours: classic version, postprocessor version, and Sass version.
Classic version
If you aim to use this grid system without changing it's configuration, just download the CSS file table-grid.css in your project. You should at least rewrite the media queries to have custom breakpoints.
Postprocessor version
If you use only a postprocessor like Pleeease or Myth, you should grab the CSS file table-grid.next.css. At the start of this file you can change the custom media queries and set the custom properties with your own values.
Sass version
If you're used to deal with the Sass preprocessor, your best choice is to install this version: it is far more flexible and scalable than the basic CSS and the postprocessor versions. In the _config.scss file you can:
- Enable the xl columns
- Set a prefix for all the CSS class names (
tg-for example) - Set the width of the gutters
- Set the total number of columns
- Set the media queries configuration
- Enable the use of future CSS's features (postprocessor required) and set the custom media queries configuration
Limitations
There are still some limitations you should be aware:
- You can't set margins on columns. You can use the
paddingproperty instead which is compatible with the displaytable-cellproperty. - It is not possible to exceed the maximum number of columns per row (12 by default).
- If you want gutters you must add a parent container for the row.
Download
All versions are available on GitHub.
Some examples
Basic
Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add immediate children into that row and specify the widths of each column with the sm-col-size-#, md-col-size-#, and lg-col-size-# classes.
This grid system has 12 columns by default, like most other grids. It is not possible to exceed 12 columns per row.
This grid is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
Equal columns
You can define columns of the same size with the #-col-size-auto classes.
If you use the #-col-size-auto classes with other columns already having a size, columns with the class #-col-size-auto will take the remaining size of the row.
Nested columns
You can nest the grids indefinitely.
Mixed: small, medium and large screens
This grid system has three tiers of classes: sm (phones), md (tablets), lg (desktops). You can also enable a xl class if you use the Sass version of the grid. You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for sm and md, you only need to specify sm.
Hide columns
You can hide columns with the class #-col-hidden.
Lines
If no size has been defined on the columns, then they will stack on top of each other. This is very useful if you are developing with the mobile first approach.
You can set the size of columns when using a "larger" class.
Lines ordering
When the columns are stacked, it is possible to reorder them with the #-first-line and #-last-line classes. These two classes can be used only when no size was defined on the columns.
The class #-first-line allows to position a line above all others.
The class #-last-line allows to position a line below all others.
Align horizontally
If your row doesn't have a count that adds up to 12 columns, you can horizontally align the columns.
To align the columns to the left, use the class #-cols-left on the row.
To center the columns, use the class #-cols-center on the row.
To align the columns to the right, use the class #-cols-right on the row.
To restore the default alignment, use the class #-cols-horizontal-reset on the row.
Align vertically
You can vertically align the content of the columns.
To align the content of the columns to the top, use the class #-cols-top on the row.
To center vertically the content of the columns, use the class #-cols-middle on the row.
To align the content of the columns to the bottom, use the class #-cols-bottom on the row.
To restore the default alignment, use the class #-cols-vertical-reset on the row.
Align the content of a column vertically
You can vertically align the content of a specific column.
To align the content of a column to the top, use the class #-col-top directly on the column.
To center vertically the content of a column, use the class #-col-middle directly on the column.
To align the content of a column to the bottom, use the class #-col-bottom directly on the column.
To restore the default alignment, use the class #-col-vertical-reset directly on the column.
You can also set a default vertical alignment for all columns and redefine alignment for a specic column.
Gutters
By default there are no gutters on the grid. You can add gutters by adding a class row-with-gutters on the parent of the row.
Gutters use negative margins like most other grids. In some situations you may need to add a overflow: hidden property on the parent which contains the whole grid.