Need help with spacegrid?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

JonathanSpeek
203 Stars 21 Forks MIT License 66 Commits 0 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 141,892
Lua
user-ex...
materia...
Sublime...
56 commits
# 164,013
Shell
HTML
Less
virtual...
1 commit
# 166,835
Swift
Shell
hmac-au...
sha3
1 commit

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.