grid64

Yay! Yet another grid system!

Say hello to grid64 - responsive, nesting, super simple

Illustration of grid64 on mobile devices

Features

  • responsive / adaptive layout
  • 5 fixed width layouts
  • fluid mobile layout
  • 6 distinct ranges of screen sizes
  • infinitive nesting blocks and rows
  • no "first" or "last" classes necessary
  • sensible column widths
  • 20 px fixed gutter

Adaptive Layout

grid64 is prepared for 6 distinct ranges of screen sizes:

  • screens < 560px
  • screens > 560px
  • screens > 740px
  • screens > 980px
  • screens > 1220px
  • screens > 1580px

Download

Usage permitted under the MIT License.

Who made it?

grid64 is made and maintained by Malte Mayrberger.

It is inspired by and based on Conor Muirheads grid system SimpleGrid which is a fork of a project originally developed by the team at Crowd Favorite.

What does it look like?

This site is built with grid64. Below you find an overview of grid widths and an example grid.

The example grid demonstrates some of the possible block combinations together with nesting of blocks.

How does it work?

Start with the .grid64 wrapper. Inside the wrapper create divs with the class .row. Inside each row, create divs with the respective .block-# for content. That's it!

6-Column Grid Blocks

The blocks 1 to 6 form the 6-column grid. They can be combined to blocks of 1/3, 1/2, 3/4, 5/6 and full content width.

To combine these blocks you just have to connect their numbers with dashes. It's super simple.

.block-1

.block-2

.block-3

.block-4

.block-5

.block-6

.block-1-2

.block-3-4

.block-5-6

.block-1-2-3

.block-4-5-6

.block-1-2-3-4

.block-5-6

.block-1-2-3-4-5

.block-6

.block-1-2-3-4-5-6

4-Column Grid Blocks

The blocks 7 to 10 form the 4-column grid. You can combine them just like the 6-column grid blocks.

.block-7

.block-8

.block-9

.block-10

.block-7-8

.block-9-10

.block-7-8-9

.block-10

.block-7-8-9-10

Layout Example with Nested Blocks and Rows

To build more sophisticated layouts you can use nested elements as shown below.

The first div.row in this example contains a div.block-1-2-3-4-5-6 - the HEADER, which contains another div.row which in turn contains a div.block-1 - the LOGO and a div.block-2-3-4-5-6 - the NAVIGATION.

Change the size of your Browser window to see how the layout degrades on small screens. The nested blocks guarantee that your website always retains a sensible content structure on all devices and screen sizes.

You can also combine elements of the 4-column grid and the 6-column grid. Just use the block numbers that best represent each blocks position in that row.

HEADER .block-1-2-3-4-5-6

LOGO .block-1

NAVIGATION .block-2-3-4-5-6

MAIN .block-1-2-3-4

ARTICLE .block-1-2-3

ARTICLE FOOTER .block-7

AUTHOR .block-8

ASIDE .block4

SIDEBAR .block-5-6

LINKS .block-5

META .block-6

RECENT POSTS .block-5-6