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
