Autoresponsive grids
The grid system that adapts to all devices with a touch of magic
The grid system use css flex system and a 12 column grid. So you can add any number of auto sizing columns to a grid (.col class) or specify how many cols will fill (.col-3 .col-12 ...). Let the grid figure it out. This grids works automatically with all resolutions. Resize the window to check the behaviour.
1 Column
1
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
</div>2 Columns
1
2
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
</div>3 Columns
1
2
3
1
3
<div class="row">
<div class="col-4">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">2</div>
</div>
<div class="col-4">
<div class="box">3</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">3</div>
</div>
</div>4 Columns
1
2
3
4
1
3
4
1
4
<div class="row">
<div class="col-3">
<div class="box">1</div>
</div>
<div class="col-3">
<div class="box">2</div>
</div>
<div class="col-3">
<div class="box">3</div>
</div>
<div class="col-3">
<div class="box">4</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="box">1</div>
</div>
<div class="col-3">
<div class="box">3</div>
</div>
<div class="col-3">
<div class="box">4</div>
</div>
</div>
<div class="row">
<div class="col-9">
<div class="box">1</div>
</div>
<div class="col-3">
<div class="box">4</div>
</div>
</div>
5 Columns
Automatic columns distibute evenly on large screens, change to 50% width in phablet, and 100% in mobile
1
2
3
4
5
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">5</div>
</div>
</div>6 Columns
Columns with specified width maintain their percentual width despite the screen size
1
2
3
4
5
6
1
2
3
4
5
1
2
3
4
1
2
3
1
2
<div class="row">
<div class="col-2">
<div class="box">1</div>
</div>
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-2">
<div class="box">3</div>
</div>
<div class="col-2">
<div class="box">4</div>
</div>
<div class="col-2">
<div class="box">5</div>
</div>
<div class="col-2">
<div class="box">6</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="box">1</div>
</div>
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-2">
<div class="box">3</div>
</div>
<div class="col-2">
<div class="box">4</div>
</div>
<div class="col-2">
<div class="box">5</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="box">1</div>
</div>
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-2">
<div class="box">3</div>
</div>
<div class="col-2">
<div class="box">4</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="box">1</div>
</div>
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-2">
<div class="box">3</div>
</div>
</div>
<div class="row">
<div class="col-10">
<div class="box">1</div>
</div>
<div class="col-2">
<div class="box">2</div>
</div>
</div>7 Columns
1
2
3
4
5
6
7
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">5</div>
</div>
<div class="col">
<div class="box">6</div>
</div>
<div class="col">
<div class="box">7</div>
</div>
</div>8 Columns
1
2
3
4
5
6
7
8
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">5</div>
</div>
<div class="col">
<div class="box">6</div>
</div>
<div class="col">
<div class="box">7</div>
</div>
<div class="col">
<div class="box">8</div>
</div>
</div>9 Columns
1
2
3
4
5
6
7
8
9
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">5</div>
</div>
<div class="col">
<div class="box">6</div>
</div>
<div class="col">
<div class="box">7</div>
</div>
<div class="col">
<div class="box">8</div>
</div>
<div class="col">
<div class="box">9</div>
</div>
</div>10 Columns
1
2
3
4
5
6
7
8
9
10
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">5</div>
</div>
<div class="col">
<div class="box">6</div>
</div>
<div class="col">
<div class="box">7</div>
</div>
<div class="col">
<div class="box">8</div>
</div>
<div class="col">
<div class="box">9</div>
</div>
<div class="col">
<div class="box">10</div>
</div>
</div>11 Columns
1
2
3
4
5
6
7
8
9
10
11
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">5</div>
</div>
<div class="col">
<div class="box">6</div>
</div>
<div class="col">
<div class="box">7</div>
</div>
<div class="col">
<div class="box">8</div>
</div>
<div class="col">
<div class="box">9</div>
</div>
<div class="col">
<div class="box">10</div>
</div>
<div class="col">
<div class="box">11</div>
</div>
</div>12 Columns
For comparison, the first row has automatic columns, all the following rows have percentual width columns (eg. col-3). When used together, distribution is equal and pixel perfect for both, allowing their use interchangeably in the design. Note: behavior is different from tablet below.
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
1
2
3
4
5
6
1
2
3
4
5
1
2
3
4
1
2
3
1
2
<div class="row">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">5</div>
</div>
<div class="col">
<div class="box">6</div>
</div>
<div class="col">
<div class="box">7</div>
</div>
<div class="col">
<div class="box">8</div>
</div>
<div class="col">
<div class="box">9</div>
</div>
<div class="col">
<div class="box">10</div>
</div>
<div class="col">
<div class="box">11</div>
</div>
<div class="col">
<div class="box">12</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
<div class="col-1">
<div class="box">6</div>
</div>
<div class="col-1">
<div class="box">7</div>
</div>
<div class="col-1">
<div class="box">8</div>
</div>
<div class="col-1">
<div class="box">9</div>
</div>
<div class="col-1">
<div class="box">10</div>
</div>
<div class="col-1">
<div class="box">11</div>
</div>
<div class="col-1">
<div class="box">12</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
<div class="col-1">
<div class="box">6</div>
</div>
<div class="col-1">
<div class="box">7</div>
</div>
<div class="col-1">
<div class="box">8</div>
</div>
<div class="col-1">
<div class="box">9</div>
</div>
<div class="col-1">
<div class="box">10</div>
</div>
<div class="col-1">
<div class="box">11</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
<div class="col-1">
<div class="box">6</div>
</div>
<div class="col-1">
<div class="box">7</div>
</div>
<div class="col-1">
<div class="box">8</div>
</div>
<div class="col-1">
<div class="box">9</div>
</div>
<div class="col-1">
<div class="box">10</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
<div class="col-1">
<div class="box">6</div>
</div>
<div class="col-1">
<div class="box">7</div>
</div>
<div class="col-1">
<div class="box">8</div>
</div>
<div class="col-1">
<div class="box">9</div>
</div>
</div>
<div class="row">
<div class="col-5">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
<div class="col-1">
<div class="box">6</div>
</div>
<div class="col-1">
<div class="box">7</div>
</div>
<div class="col-1">
<div class="box">8</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
<div class="col-1">
<div class="box">6</div>
</div>
<div class="col-1">
<div class="box">7</div>
</div>
</div>
<div class="row">
<div class="col-7">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
<div class="col-1">
<div class="box">6</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
<div class="col-1">
<div class="box">5</div>
</div>
</div>
<div class="row">
<div class="col-9">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
<div class="col-1">
<div class="box">4</div>
</div>
</div>
<div class="row">
<div class="col-10">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">3</div>
</div>
</div>
<div class="row">
<div class="col-11">
<div class="box">1</div>
</div>
<div class="col-1">
<div class="box">2</div>
</div>
</div>