Simple Grid Css

Simple Grid Css is a responsive grid system based on flexbox css

Another grid in css, however, this grid is much leaner! Great for building layouts just by being small and doing what I need: Building responsive layouts, just this.

Getting started

Via download

1. Download compiled.zip from the latest release;
2. Extract the ZIP archive and locate the simple-grid-css.min.css or simple-grid-css.css files;
3. Copy the file of your choice into your project directory;
4. So far, so good!

Via NPM

1. Use npm install simple-grid-css to install the package;
2. You will then find the source code in node_modules/simple-grid-css/simple-grid-css.css;
3. So far, so good!

How to use

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Tip: Add the class no-baseline if you want to remove the spacing between the columns

<div class="row no-baseline">
  <div class="col-xs-12 col-sm-6">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

Feel free to contribute 🤘