A simple 12 column css grid system that uses html attributes.
<tag grid="[row|col](:optional-offset):(optional-column-width)">content</tag><!-- full viewport width -->
<div grid="row:12">
<!-- Occupies the first third (4/12) of the screen -->
<div grid="col:4">
<h1>Attribute Grid</h1>
</div>
<!--- Half (6/12) of the screen, with a preceding twelveth (1/12) margin -->
<div grid="col:1:6">
<p>There's 1/12 of space left to the right of this column.</p>
</div>
<!-- A row will always break the existing column flow. -->
<!-- A grid item with no width takes all the space it can. Here: full viewport. -->
<div grid="row:"></div>
<!-- A 1/12th block. -->
<!-- This would flow with the earlier columns if not for the preceeding row. -->
<span grid="col:1"> Note: This is a span, not a div. Any tag can use the grid attribute.</span>
</div>
(grid item borders are added for the example only)
Note❗
It's very possible that css styling by attribute is slower than styling by class.
I haven't tested at all.