CSS Grid

Grid.css Lightweight CSS Grid for Web Development

Grid.css Lightweight CSS Grid for Web Development

Larger frontend frameworks like Bootstrap come with their own grid setups. But, they also come with a lot of baggage in the form of pre-designed page elements and JavaScript components.

If you’re looking for a much smaller and streamlined grid system then you’ll love Grid.css.

This free open source library comes packaged with the traditional 12-col grid system that you can structure for any layout.

What is Grid.css

Grid.css is a full grid system that you can use in your project and it won’t really make it any slower since its only 565bytes, also yes Bootstrap’s grid system is more advanced but grid.css is just what you need and nothing else

How to use?

You can find the direct download link on the Grid.css homepage or in the official GitHub repo. You could even use the raw CDN version to embed this file directly from GitHub without hosting it yourself.

This generally includes a .row element (the container) along with many internal column elements. The column classes use numbers to define their total space inside the container, so for example, .col4 takes up four columns of the twelve total.


The first step of using grid.css in your html is adding a div with the class of “row”:

Next, we can use the columns classes

Grid.css columns