The re;feri grid system

Every website emits CO₂. Behind some links, you may even find the carbon footprint equivalent to that of a plastic bag [1]. Over the past decade, the average size of a mobile website has increased sixfold to 2,011 KB [2]—that's more content than the combined length of three Harry Potter novels [3].

As part of my bachelor's thesis, I launched an initiative called RE; FERI to counteract the consumption-driven vision of the web and reduce entry barriers. The Raster System was part of it. Now, three years later, I've made it accessible in English to ensure universal access.

1 2 3 4 5 6 7 8 span=1 span=1 span=1 span=1 span=1 span=1 span=1 span=1 span=2 or 1-2 span=4-6 span=2 or 7-8 span=2-4 span=6-7 span=3 or 1-3 span=2 or 4-5 span=3 or 6-8 span=2-3 span=5-8 Hover over the black fields

Simple, Efficient & Durable

This grid system consists of a single CSS file, which in turn consists of only a few lines of code. It does not require bloated JavaScript and is very resource-efficient and fast, with only about 1 KB in size. With minor modifications, it is even possible to use this grid system for designing posters. These posters can be exported as PDFs using the browser's Print function.

grid.css (1 KB)

Demo source (demo.txt)

Instructions
The grid is divided into 8, alternatively 12 columns. Columns are assigned using the <cell> tag, and their respective length is specified using span=. Example
<cell span=3> creates a cell that is 3 columns wide. If there is not enough space in the current row, it moves to the next row.
<cell span=5-8> creates a cell that starts in the 5th column and ends in the 8th column.