Home

cover image

CSS grid is a simple library that gives you the ability to create responsive layouts without thinking too much about it. It uses grid features 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 it 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 the grid by clicking here You can check support for the 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
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
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
<div class="grid"> <div class="grid-layout-2"> <div class="demo-item">demo</div> <div class="demo-item">demo</div> </div> </div>