Simple Grid System

Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS.

Download ↓ Examples
1 2 3 4 5 6 7 8 3 7-8 2+2 5-8 1-4 6.. 2.. 4.. 1-2 4-5

Simplicity first
<r-grid columns=8>
  <r-cell span=3>3</r-cell>
  <r-cell span=7-8>7-8</r-cell>
  <r-cell span=2+2>2+2</r-cell>
  <r-cell span=5-8>5-8</r-cell>
  <r-cell span=1-4>1-4</r-cell>
  <r-cell span=6..>6..</r-cell>
  <r-cell span=2..>2..</r-cell>
  <r-cell span=4..>4..</r-cell>
  <r-cell span=1-2>1-2</r-cell>
  <r-cell span=4-5>4-5</r-cell>

The number of columns a grid has is specified by the columns attribute. For instance, to define a grid with 8 columns, you'd write <r-grid columns=8>.

Cells span a single column by default. The span attribute is used to customize where a cell starts and how many columns it spans. For example, <r-cell span=2-5> starts in column 2 and ends in column 5. A cell with an empty or missing span attribute starts on the next available column and spans one column.

Raster is pure CSS — no JavaScript involved.

The HTML here is what generates the grid you see at the top of this page.

More examples

Possible span= values

2-5 start in column 2,
end in column 5.
2+3 start in column 2,
span 3 columns.
2.. start in column 2,
span remainder of row.
2 start in next column,
span 2 columns.
row span a full row

Responsive design
<r-grid columns=6>
  <r-cell span=2   span-s=row>
  <r-cell span=3-6 span-s=row>
  <r-cell span=1-2 span-s=1>
  <r-cell span=3.. span-s=2..>

Grids lend themselves really well to device-size responsive design. The span-s attribute defines alternate layout when your design is presented on a small screen. This makes designing for large and small screens really easy.

Acme Things    About    Privacy policy Image Welcome to Acme

Tap the example above—or resize your web browser window—to see the layout change. Showing large screen. Additionally, the span-l attribute can be used to control an alternate layout for really large screens.

This entire website is built with grids and changes layout when the window size passes 600dp.

Additional responsive control with columns-s
<r-grid columns=6
columns-s=3> <r-cell> <r-cell span=2> <r-cell> <r-cell span=2> </r-grid>

Similar to span-s, columns-s is available on r-grid tags for alternate layout on small screens. Often a small-screen layout can be accomplished by simply setting columns-s without the need for any span-s attributes. The columns-l attribute is also available for large screens.

Foo Description of foo Bar Description of bar

Tap the example above—or resize your web browser window—to see the layout change. Showing large screen.

Excellent websites with minimal effort Example gallery

Raster is a complete CSS framework for creating websites.
The Raster system is minimal but complete:

Customize raster.grid.css

raster.grid.css provides the minimal set of <r-grid> functionality. If you're looking for a complete framework, use raster2.css instead.

This CSS generator is also available as a script: generate-grid.js

Open source

Raster is an open-source project and the source code is available on GitHub →

Explore the example gallery →