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.
- Download compiled.zip from the latest release;
- Extract the ZIP archive and locate the simple-grid-css.min.css or simple-grid-css.css files;
- Copy the file of your choice into your project directory;
- So far, so good!
- Use
npm install simple-grid-css
to install the package; - You will then find the source code in
node_modules/simple-grid-css/simple-grid-css.css
; - So far, so good!
<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 🤘