The Semantic CSS Grid: Page Layout for Tomorrow
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 1 commit ahead, 29 commits behind tylertate:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

#About The Semantic Grid System is a modern approach to the CSS grid. It allows you to set column and gutter widths, choose the number of columns, and switch between pixels and percentages, and achieve responsive layouts, all without any ugly .grid_x classes in your markup. It is powered by LESS.js or Stylus

It lives on the web at

#Structure Stylus / less versions are available at <less|stylus>/css/grid.<less|styl> You just need to import the grid via a

@import 'path/to/grid.less';

or for the Stylus version

@import 'path/to/grid.styl'

Check the examples out. For the Stylus version there is a script that compiles the *.styl into css for each example. Run via


Make sure you have Stylus installed globally

npm -g stylus

#Issues If you spot any issues or have ideas for improvement, feel free to file a ticket or fork on GitHub and issue a pull request.

#License Licensed under Apache 2.0. See LICENSE

#Created by The Semantic Grid System was built by Tyler Tate at TwigKit. Stylus port added by Dharmesh Malam