Currently any grid system I could find made assumptions about the layout and the style of the code. They assume some kind of padding or margin must take place for the grid. When padding is forced on the grid it causes styles to conflict and alignment to be off when grids become nested.

This library aims to only supply a grid system. If you want a specific padding width, then add that style. If you want a specific margin width this library will not support it easily.

By default most grid systems use 12 columns. I've found that the 12 column width is often not enough. So to get the best of the math that 12 provides and a bit more space, this system defaults to 24 columns.

Philosophy

A grid system should:

Make laying out content easy
Make no assumptions about its contents
Never apply styles such as padding or margin

If a consumer wishes to have default padding or margin think about applying this padding or margin to the components on the site. Try to avoid putting styles into your grid system. It conflates layout and styling which causes many headaches later in CSS development.

Usage

Code can be found in the css build/grid.css file.

<html dir="ltr">
    <head>
        <style src="path/to/stylesheet"></style>
    </head>
    <body>
        <div class="row">
            <div class="column column-xs-12 column-md-15 column-lg-20">Info</div>
            <div class="column column-xs-12 column-md-9 column-lg-4">Other Info</div>
        </div>
    </body>
</html>

.column-* classes must exist inside a .row class. When using a .column-* class it must be prefaced with a .column class. This is done to separate the layouts into what is common for all columns and what is specific for each media query set of columns.

Details

Check out the source src/grid_system.less file. It has a lot of comments on what it is doing.

Developing/testing

Run the following two commands in separate terminal windows to test out the grid system.

grunt
cd example && python -m SimpleHTTPServer

FAQs

What is grid-system?

Is grid-system popular?

Is grid-system well maintained?

Package last updated on 07 Oct 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

grid-system

Grid System

Features

Why a new grid system?

Philosophy

Usage

Details

Developing/testing

Related posts

The Growing Risk of Malicious Browser Extensions

2025 Blockchain and Cryptocurrency Threat Report: Malware in the Open Source Supply Chain

pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs