PocketGrid

Documentation

Table of Contents

Loading...

Quick start

Here is the minimal markup you need to put in your pages:

<!doctype html>
<html>
  <head>
    <!-- Don't forget the viewport meta tag for responsive sites! -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Include PocketGrid -->
    <link rel="stylesheet" href="pocketgrid.css" />
  </head>
  <body>
    <!-- YOUR CONTENT HERE -->
  </body>
</html>

As you can see, you just have to include the pocketgrid.css (or pocketgrid.min.css) file in the <head> tag of your page
and don't forget to set the viewport meta tag to manage media queries correctly on mobile.

That's all you need to work with PocketGrid!

Basic rules

Instead of creating grids with rows and columns, PocketGrid introduces a more flexible concept with blocks and block groups.
Block groups are similar to rows, and blocks are similar to columns.
The main difference is that a block group can represent several rows (thanks to the "automatic rows" feature that we will see later), allowing much more flexibility than traditional grids.

The basic rules with PocketGrid are:

  • Blocks have a default width of 100%
  • Blocks must be contained in a block-group
  • To display blocks side by side (like columns), just give them a width in percentage (for example 30% and 70% to make 2 columns)
  • Automatic rows: blocks automatically go to a new row if the current row is full, like words in a text!
    So you don't need to put a block-group container for each row!
Let's see some examples to clarify it.

Creating rows and columns: the classical way...

Like most CSS grid systems, PocketGrid can create rows (using <div class="block-group">) and columns (using <div class="block">).
Here you can see a demo with a grid containing 3 rows with various column sizes (the source code is just after the demo):
All the examples displayed in a "Demo" frame are real examples displayed in an iframe (no fake image).
You can open each example alone in a new tab clicking on the "Open in a new tab" orange button at the top right side of the frame below.
Demo
Open in a new tab
As you can see in the code below, you just have to:
  • create your block-groups (rows) and blocks (columns) in your HTML
  • define the block widths in your CSS
HTML
<div class="block-group"> <!-- First row -->
  <div class="b1 block">b1</div>
  <div class="b2 block">b2</div>
</div>
<div class="block-group"> <!-- Second row -->
  <div class="b3 block">b3</div>
  <div class="b4 block">b4</div>
  <div class="b5 block">b5</div>
</div>
<div class="block-group"> <!-- Third row -->
  <div class="b6 block">b6</div>
  <div class="b7 block">b7</div>
  <div class="b8 block">b8</div>
  <div class="b9 block">b9</div>
  <div class="b10 block">b10</div>
</div>
CSS
/* First row */
.b1, .b2 { width: 50%; }

/* Second row */
.b3 { width: 50%; }
.b4, .b5 { width: 25%; }

/* Third row */
.b6, .b7, .b8, .b9, .b10 { width: 20%; }

Creating rows and columns: the COOL way!

Thanks to PocketGrid, we can take advantage of the "automatic rows" feature!
Thus, instead of creating a block-group for each row, we can create just 1 block-group containing all our blocks!
Then, according to the width of blocks, blocks will automatically go to a new line when a row is full:
Demo
Open in a new tab
The "automatic rows" principle is simple to understand:
  • b1 + b2 = 50% + 50% = 100%, so b3 goes to a new line.
  • b3 + b4 + b5 = 50% + 25% + 25% = 100%, so b6 goes to a new line.
  • b6 + b7 + b8 + b9 = 25% + 25% + 20% + 20% = 90%, but b10 has a width of 20%, so the total would be greater than 100%. Thus b10 goes to a new line!
HTML
<div class="block-group">
  <div class="b1 block">b1</div>
  <div class="b2 block">b2</div>
  <div class="b3 block">b3</div>
  <div class="b4 block">b4</div>
  <div class="b5 block">b5</div>
  <div class="b6 block">b6</div>
  <div class="b7 block">b7</div>
  <div class="b8 block">b8</div>
  <div class="b9 block">b9</div>
  <div class="b10 block">b10</div>
</div>
CSS
.b1, .b2, .b3 { width: 50%; }
.b4, .b5, .b6, .b7 { width: 25%; }
.b8, .b9, .b10 { width: 20%; }
To sum up what makes the "automatic rows" feature more flexible:
  • In the HTML, you just define blocks in a block-group, no matter if they are on the same row or not.
  • In the CSS, you set the block widths, and according to the block widths, the blocks will be displayed on the same row (or not).
  • It's compatible with Media Queries: you can set different widths for each block according to the device (smartphone, tablet, desktop, TV...)
    For example, blocks could be stacked on mobile, side by side on desktop, and an hybrid version on tablets: it's just CSS configuration!
    That's what makes PocketGrid so flexible and powerful!
If your blocks have different heights, the "automatic rows" layout could seem broken, but it's not: this problem and its solution will be explained later (see "Automatic rows in real life!").

Mobile layout

Usually, a mobile layout consists of blocks (header, navigation, main content, links, footer...) vertically stacked.
This kind of layout is very simple with PocketGrid: you just have to put all your blocks in a block-group, without any CSS configuration (because the default width of blocks is 100%, and blocks automatically go to a new row after 100%, so blocks are stacked by default):
Demo
Open in a new tab
The source of this example (just below) is pretty self-explanatory:
  • each block has a block class
  • a block-group wraps all these blocks
  • blocks are stacked by default (width: 100%)
HTML
<div class="block-group">
  <div class="header block">Header</div>
  <div class="nav block">Nav</div>
  <div class="main block">Main</div>
  <div class="links block">Links</div>
  <div class="footer block">Footer</div>
</div>
CSS
/* Nothing in the CSS! */

Basic layout

Now imagine that we would like to display the navigation block and the main block side by side:
Demo
Open in a new tab
To do this, we can keep the same HTML as in the previous example: we just have to give a width to the navigation and main blocks (respectively 20% and 80%):
HTML
<div class="block-group">
  <div class="header block">Header</div>
  <div class="nav block">Nav</div>
  <div class="main block">Main</div>
  <div class="links block">Links</div>
  <div class="footer block">Footer</div>
</div>
CSS
.nav { width: 20%; }
.main { width: 80%; }

Making it responsive

Now let's make this example responsive!
For example, we want to have this behaviour:
  • All blocks are stacked on mobile
  • The navigation and main blocks are side by side on tablet (width > 768px)
  • The navigation, main and links blocks are side by side on desktop (width > 960px)
Resize your browser and see the layout changes in the preview below:
You should click on the "Open in a new tab" orange button to play with this example more easily.
Demo
Open in a new tab
To make this responsive behaviour, we just have to put our own Media Queries in the CSS, and change the block widths according to the device width:
HTML
<div class="block-group">
  <div class="header block">Header</div>
  <div class="nav block">Nav</div>
  <div class="main block">Main</div>
  <div class="links block">Links</div>
  <div class="footer block">Footer</div>
</div>
CSS
/* Smartphone version
   Nothing to do: blocks are stacked by default. */

/* Tablet version */
@media (min-width: 768px) {
  .nav { width: 20%; }
  .main { width: 80%; }
}

/* Desktop version */
@media (min-width: 960px) {
  .nav { width: 20%; }
  .main { width: 60%; }
  .links { width: 20%; }
}

Nested grids

With PocketGrid, you can nest grids (i.e. create a grid inside a grid).
You just have to put a block-group inside another block-group!
Let's modify the previous example, replacing the main block with a nested grid (containing items in 5 columns):
Demo
Open in a new tab
HTML
<div class="block-group">
  <div class="header block">Header</div>
  <div class="nav block">Nav</div>
  <!-- nested grid -->
  <div class="main block-group">
    <div class="ngrid block">Nested grid</div>
    <div class="item block">1</div>
    <div class="item block">2</div>
    <div class="item block">3</div>
    <div class="item block">4</div>
    <div class="item block">5</div>
    <div class="item block">6</div>
    <div class="item block">7</div>
    <div class="item block">8</div>
    <div class="item block">9</div>
    <div class="item block">10</div>
  </div>
  <div class="footer block">Footer</div>
</div>
CSS
.nav { width: 20%; }
.main { width: 80%; }
/* Items in 5 columns (20% each) */
.item { width: 20%; }

/* Give a height of 200px to the nav, to make it more realistic! */
.nav { height: 200px; }

Nested grids responsive

Now we are going to do something impossible to do with most CSS grid systems! (such as Twitter Bootstrap)
We will change the number of columns of our grid according to the device width.
Keeping our previous nested grids example, we will display the nested items in 2 columns on mobile, 4 columns on tablet and 5 columns on desktop!
Resize your browser and see the layout changes in the preview below.
You should click on the "Open in a new tab" orange button to play with this example more easily.
Demo
Open in a new tab
Sounds difficult?
Well, with PocketGrid, it's very simple: to dynamically change the number of columns of a grid, you just have to redefine the block width according to media queries:
HTML
<div class="block-group">
  <div class="header block">Header</div>
  <div class="nav block">Nav</div>
  <!-- nested grid -->
  <div class="main block-group">
    <div class="ngrid block">Nested grid</div>
    <div class="item block">1</div>
    <div class="item block">2</div>
    <div class="item block">3</div>
    <div class="item block">4</div>
    <div class="item block">5</div>
    <div class="item block">6</div>
    <div class="item block">7</div>
    <div class="item block">8</div>
    <div class="item block">9</div>
    <div class="item block">10</div>
  </div>
  <div class="footer block">Footer</div>
</div>
CSS
/* Common to smartphone, tablet and desktop */
.nav { width: 20%; height: 200px; }
.main { width: 80%; }
.item { width: 50%; } /* 2 columns */

/* Tablet version:
   items are displayed in 4 columns (25% each) */
@media (min-width: 40em) {
  .item { width: 25%; } /* 4 columns */
}

/* Desktop version:
   items are displayed in 5 columns (20% each) */
@media (min-width: 60em) {
  .item { width: 20%; } /* 5 columns */
}

Offsetting columns

You can add offsets to blocks (to simulate empty columns for example).
To do so, you just have to set the margin-left or margin-right properties of a block to the size of one or more columns.
For example, here the "Left offset" block has a left offset of 1 column (margin-left: 20%) and the "Right offset" block has a left offset of 2 column (margin-right: 40%)
Demo
Open in a new tab
HTML
<body class="block-group">

  <div class="b1 block">B1</div>
  <div class="b2 block">B2</div>
  <div class="b3 block"><div class="box" title="margin-left: 20%">Left offset</div></div>
  <div class="b4 block">B4</div>
  <div class="b5 block">B5</div>
  <div class="b6 block">B6</div>
  <div class="b7 block">B7</div>
  <div class="b8 block">B8</div>
  <div class="b9 block">B9</div>
  <div class="b10 block">B10</div>
  <div class="b11 block"><div class="box" title="margin-right: 20%">Right offset</div></div>
  <div class="b12 block">B12</div>

</body>
CSS
.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10, .b11, .b12 {
  width: 20%;
}
/* Left offset: just give the margin-left the size you want!
Note: For IE6 compatibility, you have to put "!important" also. */
.b3 { margin-left: 20% !important; }
/* Right offset: just give the margin-right the size you want! */
.b11 { margin-right: 40% !important; }

/* Some styles for better readability */
.b3 .box { background-color: #CDF; font-size: .8em; }
.b11 .box { background-color: #CFC; font-size: .8em; }

Push / Pull (swap columns)

To change the order of columns (name them A and B), you have to :
  • Set the position property of the blocks to "relative"
  • Set the left property of A to the width of B
  • Set the left property of B to minus the width of A
Demo
Open in a new tab
If you look at the HTML source, the "BEFORE" column is declared before the "AFTER" column, whereas it is displayed after.
HTML
<body class="block-group">

  <div class="b1 block">B1</div>
  <div class="b2 block">B2</div>
  <div class="before block">BEFORE</div>
  <div class="after block">AFTER</div>
  <div class="b5 block">B5</div>
  <div class="b6 block">B6</div>
  <div class="b7 block">B7</div>
  <div class="b8 block">B8</div>
  <div class="b9 block">B9</div>
  <div class="b10 block">B10</div>

</body>
CSS
.b1, .b2, .b5, .b6, .b7, .b8, .b9, .b10 {
  width: 10%;
}

.before {
  width: 30%;
  /* Move the column to the right
     (left == AFTER's width) */
  position: relative; left: 20%;
}
.after {
  width: 20%;

  /* Move the column to the left
     (left == -BEFORE's width) */
  position: relative; left: -30%;
}

.before .box { background-color: #CDF; }
.after .box { background-color: #CFC; }

Gutters

Gutters refer to the space between blocks.
PocketGrid can manage horizontal and vertical gutters.
To use gutters, you have 2 options:

Option 1: paddings all around the blocks

This first option is quite intuitive: to make gutters, we apply padding all around blocks:
(to illustrate it, you can see the padding of the first and last blocks in red below)

1
2
3
4
5
6
7
8
9
10
11
12
To set gutters, just add these styles: 
.block-group { margin: -verticalGutter -horizontalGutter; }
.block { padding: verticalGutter horizontalGutter; }
For example, if we want an vertical gutter of 2px, and a horizontal gutter of 6px: 
.block-group { margin: -2px -6px; }
.block { padding: 2px 6px; }
(note that block-group margins are negative values)

Advantage of this option: it's intuitive and it's easy to make a mouseover effect on blocks for example.
Drawback of this option: because of the bottom and right paddings, it could display scrollbars when the grid is 100% of the page width.

Option 2: paddings only on left and top sides

This second option consists of putting paddings only to the left and top sides of blocks to avoid the scrollbars problem of option 1:
(to illustrate it, you can see the padding of the first and last blocks in red below, and compare it to option 1)

1
2
3
4
5
6
7
8
9
10
11
12
To set gutters, just add these styles: 
.block-group { margin: -verticalGutter 0 0 -horizontalGutter; }
.block { padding: verticalGutter 0 0 horizontalGutter; }
For example, if we want an vertical gutter of 2px, and a horizontal gutter of 6px: 
.block-group { margin: -4px 0 0 -12px; }
.block { padding: 4px 0 0 12px; }
(note that margins and paddings have been multiplied by 2 in comparison to option 1,
because they are only on left and top sides)

Advantage of this option: avoids the scrollbars issue.
Drawback of this option: you cannot put a background or a border on these blocks, because it would not be centered.

Which option is better? It depends! ;)
Option 1 (paddings all around the blocks) can be more appropriate if you want to put backgrounds directly on blocks (because paddings are equally spread around blocks).
Option 2 (top and left paddings) is more appropriate for global site layout if your layout is 100% page width (to avoid scrollbars).

Try playing with both, and see which one feels better for you.
You could even mix these 2 options! With PocketGrid, you are free!

To go further with gutters, you can see these 2 examples:

Automatic rows in real life!

In previous examples, all blocks had the same height. But in real life, with real content, they could have different heights.
However, when blocks have different heights, the "automatic rows" layout could seem broken (but of course, it's not!)
To make it clearer, let's see how PocketGrid works internally:

For layout positioning, PocketGrid uses floats (like most CSS grids): each block has a "float: left" property.
By default, float elements are displayed side by side, and with PocketGrid's "automatic rows" feature, when there is not enough space in the row to display all elements, the next elements go to a new line (like words in a text):
1
2
3
4
5
6
7
8
9
10
11
12
<div class="block-group">
  <div class="block b1">1</div>
  <div class="block b2">2</div>
  <div class="block b3">3</div>
  <div class="block b4">4</div>
  <div class="block b5">5</div>
  <div class="block b6">6</div>
  <div class="block b7">7</div>
  <div class="block b8">8</div>
  <div class="block b9">9</div>
  <div class="block b10">10</div>
  <div class="block b11">11</div>
  <div class="block b12">12</div>
</div>
Nevertheless, if elements do not have the same height, the design can be broken.
Here, block 2 has a greater height:
1
2
3
4
5
6
7
8
9
10
11
12
It's a classical problem with floats: the line break is blocked by the bigger blocks (here block 2).
A simple (but poor) solution could be to use a "block-group" for each row (like Twitter Bootstrap does, with its "row" class), but this solution would loose the "automatic rows" benefits:
1
2
3
4
5
6
7
8
9
10
11
12
<div class="block-group">
  <div class="block b1">1</div>
  <div class="block b2">2</div>
  <div class="block b3">3</div>
  <div class="block b4">4</div>
</div>
<div class="block-group">
  <div class="block b5">5</div>
  <div class="block b6">6</div>
  <div class="block b7">7</div>
  <div class="block b8">8</div>
</div>
<div class="block-group">
  <div class="block b9">9</div>
  <div class="block b10">10</div>
  <div class="block b11">11</div>
  <div class="block b12">12</div>
</div>
A better solution (keeping the "automatic rows") is to put "clear: left" on blocks that should be on a real new row (here: block 5):
1
2
3
4
5
6
7
8
9
10
11
12
.b5 {
  clear: left;
}
This solution is better because it does not impact the HTML (CSS-only), it's compatible with Media Queries (you could apply line breaks on different blocks according to the device) and you can use the "automatic rows" feature.
If we had more than 1 big block (or if we didn't know the height of the blocks), instead of manually setting "clear: left" on each block that should be on a real new row, we can use the nth-child pseudo selector to force the clear every 4 blocks:
1
2
3
4
5
6
7
8
9
10
11
12
.block:nth-child(4n+1) {
    clear: left;
}
For a complete responsive example using clear and nth-child, you can see this example.
The "clear: left" solution is not compatible with IE6 and IE7.
For these browsers, you should force the blocks to have the same height, or you should use a "block-group" for each row.
For more tips and information, you should take a look at the FAQ page.
Copyright 2013 Arnaud Leray
MIT License