JonathanSpeek / Spacegrid
Licence: mit
A no-frills responsive grid layout to help you get started on your next project.
Stars: ✭ 202
Labels
Projects that are alternatives of or similar to Spacegrid
Personal Goals
List of books I've read, projects I've done, videos I've seen, articles I've read or podcasts I've listened to.
Stars: ✭ 75 (-62.87%)
Mutual labels: grid-layout
Bootstrap Grid Css
The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.
Stars: ✭ 119 (-41.09%)
Mutual labels: grid-layout
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (-22.28%)
Mutual labels: grid-layout
Flutter layout grid
A grid-based layout system for Flutter, inspired by CSS Grid Layout
Stars: ✭ 109 (-46.04%)
Mutual labels: grid-layout
Vue Responsive Dash
Responsive, Draggable & Resizable Dashboard (Grid) for Vue
Stars: ✭ 128 (-36.63%)
Mutual labels: grid-layout
Framelayoutkit
FrameLayoutKit is a super fast and easy to use autolayout kit
Stars: ✭ 53 (-73.76%)
Mutual labels: grid-layout
Reactsimpleflexgrid
A way to quickly add a Grid Layout to your React app 🚀
Stars: ✭ 181 (-10.4%)
Mutual labels: grid-layout
Rdhcollectionviewgridlayout
Grid layout for UICollectionView
Stars: ✭ 159 (-21.29%)
Mutual labels: grid-layout
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (-56.44%)
Mutual labels: grid-layout
React Photo Layout Editor
Photo layout editor for react
Stars: ✭ 96 (-52.48%)
Mutual labels: grid-layout
Popo
PoPo is the grid layout tool, the best choice for runtime layout.
Stars: ✭ 130 (-35.64%)
Mutual labels: grid-layout
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (-19.31%)
Mutual labels: grid-layout
React Native Grid List
🌁 Grid list component implemented with FlatList
Stars: ✭ 74 (-63.37%)
Mutual labels: grid-layout
Savvior
A Salvattore and Masonry alternative without CSS-driven configuration or absolute CSS positioning
Stars: ✭ 122 (-39.6%)
Mutual labels: grid-layout
Grd
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
Stars: ✭ 2,210 (+994.06%)
Mutual labels: grid-layout
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (-14.36%)
Mutual labels: grid-layout
Android List To Grid
Implementation of List to Grid: Icon Transition
Stars: ✭ 147 (-27.23%)
Mutual labels: grid-layout
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 spacegrid
Examples
<!-- 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].