ARODAX GRID

Modern, simple and easy to use CSS grid. Just place the grid css file in your project folder and start to create your layout.

This package is distributed under MIT licence.

Minified (8 KB)

Download

Source (13 KB)

Download

Install with Yarn

yarn add @arodax/css-grid

Install with NPM

npm i @arodax/css-grid

Use with CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@arodax/css-grid@2/index.min.css">

Universal and versatile layout

Easy to understand and implement

Modern, valid and compatible code

Just a bare grid, nothing else


Breakpoints

Device Code Range
Extra large xl 1551+ px
Large lg 1251 - 1550 px
Medium md 951 - 1250 px
Small sm 751 - 950 px
Extra small xs 0 - 750 px

Browser support

Chrome 49+
Edge 16+
Firefox 31+
Opera 36+
Safari 9+

Various width

Results showcase

Code editor

col-12
col-11
col-1
col-10
col-2
col-9
col-3
col-8
col-4
col-7
col-5
col-6
col-6

Exact-width

Results showcase

Code editor

col-same-5
col-same-5
col-same-5
col-same-5
col-same-5
col-same-7
col-same-7
col-same-7
col-same-7
col-same-7
col-same-7
col-same-7
col-same-8
col-same-8
col-same-8
col-same-8
col-same-8
col-same-8
col-same-8
col-same-8
col-same-9
col-same-9
col-same-9
col-same-9
col-same-9
col-same-9
col-same-9
col-same-9
col-same-9
col-same-10
col-same-10
col-same-10
col-same-10
col-same-10
col-same-10
col-same-10
col-same-10
col-same-10
col-same-10
col-same-11
col-same-11
col-same-11
col-same-11
col-same-11
col-same-11
col-same-11
col-same-11
col-same-11
col-same-11
col-same-11

Automatic-width

Results showcase

Code editor

col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col-auto (short content)
col-auto (looooooooooooooooooooooong content)

Align

Results showcase

Code editor

(some content)
(some content)
(some content)
(some content)
(some content)
(parent) v-start
(some content)
(some content)
(some content)
(some content)
(some content)
(parent) v-center
(some content)
(some content)
(some content)
(some content)
(some content)
(parent) v-end
(some content)
(some content)
(some content)
(some content)
(some content)
(parent) v-stretch

Justify

Results showcase

Code editor

(parent) h-start
(parent) h-center
(parent) h-end
(parent) h-around
(parent) h-around
(parent) h-between
(parent) h-between

Grow & shrink

Results showcase

Code editor

shrink-0
grow-1