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:
<html>
<head>
<!-- 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">
</head>
...
</html>Quick Installation
Install with NPM
See documentation
$ npm install spacegrid
Add this to the head of your pages:
<script src="path_to/node_modules/spacegrid/build/bundle.js"></script>Install with Bower
See documentation
$ bower install spacegrid
Add this to the head of your pages:
<link href="path_to/bower_components/spacegrid/spacegrid.css" rel="stylesheet" type="text/css">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:
*= require spacegridExamples
<!-- full width example -->
<div class="row">
<div class="space-1">This is 100% width</div>
</div>
<!-- three columns -->
<div class="row">
<div class="space-3">This is 33.3% width</div>
<div class="space-3">This is 33.3% width</div>
<div class="space-3">This is 33.3% width</div>
</div>
<!-- two columns -->
<div class="row">
<div class="space-2">This is 50% width</div>
<div class="space-2">This is 50% width</div>
</div>
<!-- four columns -->
<div class="row">
<div class="space-4">This is 25% width</div>
<div class="space-4">This is 25% width</div>
<div class="space-4">This is 25% width</div>
<div class="space-4">This is 25% width</div>
</div>See it in use here.
With Added Flexibility
Here are a few add-ons:
- 25% width
- 40% width
- 60% width
- 66% width
- 75% width
<!-- these works too :D -->
<div class="row">
<div class="space-3">This is 33.3% width</div>
<div class="space-66">This is 66.6% width</div>
</div>
<div class="row">
<div class="space-75">This is 75% width</div>
<div class="space-25">This is 25% width</div>
</div>
<div class="row">
<div class="space-40">This is 40% width</div>
<div class="space-60">This is 60% width</div>
</div>
Compatibility
CSS3 media queries are utilitized, which are well-supported amongst most modern browsers. Here's a compatibility chart.
Contributing to Spacegrid
- Spacegrid CSS is currently maintained by @JonathanSpeek
- Checkout the Contribution Guide if you'd like to lend a hand.