CSS Grid

CSS Grid was created for developers who need a simple grid system for their project. CSS Grid has default width of 1340px. It uses grid feature of CSS, and is fully responsive down to mobile devices, without any media queries.

github

About

CSS grid is a simple library that gives you an ability to create responsive layouts without thinking too much about it. It uses grid feature from CSS to create layouts for modern browsers.
This is not Bootstrap, Tailwind or something similar. You can't use this to create buttons, cards, modals, etc.

For now this library is very small (unminified version has 59 lines of code), but you can create some interesting layouts with it.
Soon I'll be adding some presets for layouts. This means that you'll be able to create nice looking galleries, and layouts with only one class.

I was using Bootstrap for a long time, and realized that I mostly use it because I can easily create responsive layouts, which means that other parts of it are unused, so that's why I decided to create this.
I wanted to do for myself but then I decided to open-source it because someone might find it useful or even contribute to it.

You can read more about grid by clicking here
You can check support for grid by clicking here

Demo

All items take equal amount of space and they resize with the browser. When there isn't enough space left for the element it will go to the new line, and ensure that all elements are fully visible.

To see the effect try resizing your browser.

demo
demo
demo
demo
demo
demo
demo
demo
demo
demo
demo
demo
<div class="grid">
  <div class="grid-layout-12">
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
  </div>
</div>
demo
demo
demo
demo
demo
demo
demo
demo
<div class="grid">
  <div class="grid-layout-8">
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
  </div>
</div>
demo
demo
demo
demo
demo
demo
<div class="grid">
  <div class="grid-layout-6">
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
  </div>
</div>
demo
demo
demo
demo
<div class="grid">
  <div class="grid-layout-4">
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
  </div>
</div>
demo
demo
demo
demo
demo
demo
demo
demo
<div class="grid">
  <div class="grid-layout-4">
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
  </div>
</div>
demo
demo
<div class="grid">
  <div class="grid-layout-2">
    <div class="demo-item">demo</div>
    <div class="demo-item">demo</div>
  </div>
</div>

Features