What's that?

An other css grid system...

This is a very simple css grid system that is EXTREMELY lightweight (~5ko)

There are 2 different sizes:

(in order to test the grids, don't hesitate to resize your browser window)

screen width > 768px: 1, 2, 3, 4 or 5 items per lines

screen width < 768px:

1 item per line
force 1, 2, 3, 4 or 5 items per lines

This grid is easy to use for begginers, and easy to customize for confirmed developpers.

How to

Download the css script and put it before yours in the head tag

<link rel="stylesheet" href="css/z-grid.css">

Default grid

If you use emmet, you can use this code:

.z-grid>.z-X*Y>.z-box

X : the maximum number of boxes per line
Y : the number of boxes you want in the grid

.z-1

.z-2

.z-3

.z-4

.z-5

Mobile Forced grid

This system doesn't resize on mobile screens.

If you use emmet, you can use this code:

.z-grid>.z-X-f*Y>.z-box

X : the maximum number of boxes per line
Y : the number of boxes you want in the grid

.z-1-f

.z-2-f

.z-3-f

.z-4-f

.z-5-f

Colors

You can set background color by using the predefined classes:

.red-box

.green-box

.blue-box

or by adding your own style

.z-box.black-box{
   background: #000;
   color:#fff;
}

here the boxes will be black and the text will be white.

Custom boxes

You are not obligated to use the default boxes!! create your own by adding some code like this one in your css:

.z-grid > [class *= "z-"] > .custom-box{/*Your code here*/}

for example:

.z-grid > [class *= "z-"] > .custom-box{
   padding:1em;
   margin:3em;
   background:#559;
   color:#595;
   border:10px #955 dotted;
   text-align:center;
}

.custom box

Without boxes

You can make grids with anything else than boxes, It can be usefull to build a images grids without margins for example:

.z-grid>.z-X-f*Y>img[src=https://picsum.photos/id/$00/350/200.jpg]

X : the maximum number of boxes per line
Y : the number of boxes you want in the grid

Here there are images instead of boxes, you just have to add the following code in your css to make it work perfectly:

.z-grid > [class *= "z-"] > img{
   display:block;
   max-width:100%;
}

About

This project is intended to evolve. You can fork, modify and pull request, etc... It is publicated on github under the beerware license.

Z-GRID

This is my EXTREMELY lightweight grid system (~5ko!!)

Github

Download