×

Grid System

The grid is a 12-column fluid grid with a min width of 960px, that shrinks with the browser/device at smaller sizes. The min width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
size breakpoint (min-width)
xs 0 px
sm 480 px
md 720 px
lg 960 px
xl 1200 px

Examples

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
12
1
                   
<div class="container">
    <div class="row">
        <div class="col-1-lg col-12-sm bg-grey-700 p-2 text-white">1</div>
        <div class="col-11-lg col-12-sm bg-grey-800 p-2 text-white">11</div>
    </div>
    <div class="row">
        <div class="col-2-lg col-12-sm bg-grey-700 p-2 text-white">2</div>
        <div class="col-10-lg col-12-sm bg-grey-800 p-2 text-white">10</div>
    </div>
    <div class="row">
        <div class="col-3-lg col-12-sm bg-grey-700 p-2 text-white">3</div>
        <div class="col-9-lg col-12-sm bg-grey-800 p-2 text-white">9</div>
    </div>
    <div class="row">
        <div class="col-4-lg col-12-sm bg-grey-700 p-2 text-white">4</div>
        <div class="col-8-lg col-12-sm bg-grey-800 p-2 text-white">8</div>
    </div>
    <div class="row">
        <div class="col-5-lg col-12-sm bg-grey-700 p-2 text-white">5</div>
        <div class="col-7-lg col-12-sm bg-grey-800 p-2 text-white">7</div>
    </div>
    <div class="row">
        <div class="col-6-lg col-12-sm bg-grey-700 p-2 text-white">6</div>
        <div class="col-6-lg col-12-sm bg-grey-800 p-2 text-white">6</div>
    </div>
    <div class="row">
        <div class="col-7-lg col-12-sm bg-grey-700 p-2 text-white">7</div>
        <div class="col-5-lg col-12-sm bg-grey-800 p-2 text-white">5</div>
    </div>
    <div class="row">
        <div class="col-8-lg col-12-sm bg-grey-700 p-2 text-white">8</div>
        <div class="col-4-lg col-12-sm bg-grey-800 p-2 text-white">4</div>
    </div>
    <div class="row">
        <div class="col-9-lg col-12-sm bg-grey-700 p-2 text-white">9</div>
        <div class="col-3-lg col-12-sm bg-grey-800 p-2 text-white">3</div>
    </div>
    <div class="row">
        <div class="col-10-lg col-12-sm bg-grey-700 p-2 text-white">10</div>
        <div class="col-2-lg col-12-sm bg-grey-800 p-2 text-white">2</div>
    </div>
    <div class="row">
        <div class="col-11-lg col-12-sm bg-grey-700 p-2 text-white">12</div>
        <div class="col-1-lg col-12-sm bg-grey-800 p-2 text-white">1</div>
    </div>
</div>
Argon CSS also comes with utility classes for grid templates and row templates
Class
Properties
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));
Dropdown Select Animation