Grids

A collection of fluid, responsive grid systems.

In the Markup Framework, grids are not meant to be used to define the main structure of a Web interface, but instead are intended to be used to set out content within an existing layout zone. Thus all grids are fluid, scaling to 100% of the width of whatever container they are dropped in to.

All of the grid systems are mobile-first responsive. On small screens, everything is arranged vertically. Content is arrange in columns only on larger screens. The 12-column, 16-column and 24-column grids all have a single breakpoint. The mixed-column grids have multiple breakpoints.

12-column grids

12-column grid #01

12-column grids are dividable by 2, 3, 4 and 6, which is enough flexibility for most projects. This particular grid system has a 1% gutter between columns, and 20px vertical spacing between rows. The breakpoint is at 600px.

Demo | Download

12-column grid #02

Another variant on the 12-column grid, this one has 2% gutters and a breakpoint at 750px.

Demo | Download

12-column grid #03

5% column widths, 3.6% gutters, 1000px breakpoint, 40px vertical spacing between grid rows.

Demo | Download

16-column grids

16-column grid #01

16-column grids are dividable by 2, 4 and 8. In this grid system, gutters are set to 0.5% of the container width, with 20px spacing placed between rows. The breakpoint is 750px.

Demo | Download

16-column grid #02

As above but with wider 1% gutters.

Demo | Download

16-column grid #03

As above but with 2% gutters and a breakpoint at 900px.

Demo | Download

24-column grids

24-column grid #01

24-column grids are the most flexible. They are dividable by 2, 3, 4, 6, 8 and 12, providing lots of flexibility in the presentation of content. This 24-column grid has 0.5% column gutters, 20px between grid rows, and a breakpoint at 750px.

Demo | Download

24-column grid #02

As above but with 1% column gutters.

Demo | Download

Mixed-column grids

Mixed-column grid #01

Mixed-column grids have multiple breakpoints. The greater the number of columns, the wider the screen needs to be before the columns can switch from a vertical to a horizontally layout. This particular grid system has a two-column grid that shows on screens 700px or wider; a three-column grid with an 800px breakpoint; a four-column grid with a 900px breakpoint; and a six-column grid with a 1100px breakpoint. The gutter size (the gap between columns) is 6% throughout.

Demo | Download