spacegrid

by JonathanSpeek

JonathanSpeek / spacegrid

A no-frills responsive grid layout to help you get started on your next project.

201 Stars 23 Forks Last release: Not found MIT License 66 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Tag Downloads Downloads License

A basic, responsive grid layout to help you get started on your next project (in about 1kb 🔥).

Setup your project

Download either the spacegrid.min.css or spacegrid.css file and link it to your project:

    <!-- for the @media queries to function -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- include the space-grid css -->
    <link rel="stylesheet" href="path_to/space-grid/css/spacegrid.min.css">

...

Quick Installation

Install with NPM

See documentation

$ npm install spacegrid

Add this to the head of your pages:

html

Install with Bower

See documentation

$ bower install spacegrid

Add this to the head of your pages:

html

Install using Ruby Gem

See documentation

Add this line to your application's Gemfile:

gem 'spacegrid'

And then execute:

$ bundle

Or install it yourself as:

$ gem install spacegrid

Add this to your application.css file:

css
*= require spacegrid

Examples

This is 100% width
This is 33.3% width
This is 33.3% width
This is 33.3% width
This is 50% width
This is 50% width
This is 25% width
This is 25% width
This is 25% width
This is 25% width

See it in use here.


With Added Flexibility

Here are a few add-ons:

  • 25% width
  • 40% width
  • 60% width
  • 66% width
  • 75% width
This is 33.3% width
This is 66.6% width
This is 75% width
This is 25% width
This is 40% width
This is 60% width

Compatibility

CSS3 media queries are utilitized, which are well-supported amongst most modern browsers. Here's a compatibility chart.


Contributing to Spacegrid

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.