Last week a friend of mine, Rory, created a proof of concept for a lightweight grid system using CSS variables, weighing in at a crazy 469 bytes (non-gzipped!).

After talking things through with Rory and a couple of my colleagues I really think this concept could be where the future of class-based grid systems will go, no matter if they're using Flexbox, CSS Grids, display: inline-block; or even floats.

Fig 1. Rory's tweet promoting the proof of concept demo.

See the Pen Wee Grid by roikles (@roikles) on CodePen.

Fig 2. The Codepen demo of the concept.

What is a class-based CSS Grid System?

Before I go any further, I'd better clear things up as buzzwords can be a little confusing. A class-based Grid system is a working title I like to use when a Grid's layout is dictated by the classes you have on it at present, rather than predefined properties that cannot be altered.

To give an example, let's take a basic 4 column grid system:

<div class="grid">
	<div class="grid-item">1</div>
	<div class="grid-item">2</div>	
	<div class="grid-item">3</div>
	<div class="grid-item">4</div>
</div>
.grid {
	margin: 0;
	padding: 0;
}


@media screen and (min-width: 35em) {
	.grid-item {
		float: left;
		width: 50%;
	}
}

@media screen and (min-width: 60em) {
	.grid-item {
		width: 25%;
	}
}

As a basic grid system, it'll do the job. However, what if you wanted 2 columns on another section, 6 columns on the next and a 3 column grid on your about us page? Well then you're s**t out of luck.

Perhaps you'd go with a more robust grid system using a preprocessor like Susy where you call mixins on existing classes to extend their properties with grid based ones.

.about-us-main-content {
	@media screen and (min-width: 50em) {
		@include span(2 of 3); // 66% at 50em
	}
}

.about-us-sidebar {
	@media screen and (min-width: 50em) {
		@include span(1 of 3) // 33% at 50em
	}
}

.home-page-4-feature-panels {
	@include span(1 of 2) // 2 columns by default
	
	@media screen and (min-width: 50em) {
		@include span(1 of 4) // 4 columns at 50em
	}
}

Yep, that works. You'll have control of custom layouts depending on a section-by-section basis rather than having to conform to the same sizes each time. In addition, you're not limited by the breakpoints either as you could add these in with the use of media queries as shown above. So what's the downside? Well... bloat.

Every time you use the same grid output somewhere you're duplicating the compiled CSS code. Taking the Sass code below as an example

.feature-panels {
	@include span(1 of 4);
}

.footer-panels {
	@include span(1 of 4);
}

That would be compiled into something like...

.feature-panels {
	width: 25%;
}

.footer-panels {
	width: 25%;
}

or perhaps even this...

.footer-panels,
.feature-panels {
	width: 25%;
}

Whilst a simplified demo, it illustrates the problem of duplication. On smaller projects you can afford to get away with things like this, but when working on larger projects or projects with a larger performance budget then you're going to want to relook at the solution.

This in my eyes is where class-based grid systems come into play. Take a look at the HTML below.

<div class="grid home-panels">
	<div class="grid-item grid-item-1-4"></div>
	<div class="grid-item grid-item-1-4"></div>
	<div class="grid-item grid-item-1-4"></div>
	<div class="grid-item grid-item-1-4"></div>
</div>

<div class="grid footer-panels">
	<div class="grid-item grid-item-1-2"></div>
	<div class="grid-item grid-item-1-2"></div>
</div>

By consolidating all code into predefined classes we're cutting off any duplication we may have and by setting grid widths on the HTML rather than the CSS we've got complete control to the sizing of different sections or pages.

As an example, I actually created my own grid system last year called Groot which we've been using at Mixd since then and I'd definitely recommend it to those of you who would like to try out the concept. In addition, I know many larger companies are using these concepts, one of those being Sky thanks to a certain CSS Wizard so there's plenty of resources out there if you're looking to get started.

The future?

Anyhow, the future. Using Rory's concept we could utilise the style attribute to determine the size of a grid's item, rather than using a class.

Now I know what you're going to say, and generally speaking you're right. Normally the style attribute is frowned upon in modern CSS architecture due to it's lack of reusability and bloat from using the same code twice. However, in this instance with the use of variables, I think they're the perfect use-case.

<div class="grid footer-panels">
	<div class="grid-item" style="--grid-item-size: 50;"></div>
	<div class="grid-item" style="--grid-item-size: 50;"></div>
</div>

Mimicking the original class-based grid from before but with the use of variables for the sizing which is changing on a layout by layout basis.

In this example we've defined our style attribute as --grid-item-size: 50;. If we take a look at our imaginary grid system, we'd use that variable on the width of .grid-item.

.grid-item {
	width: var(--grid-item-size)%;
}

This would mean that you do not have to create separate classes for each variant, as well as being a little more semantic in my eyes, using the style attribute and variables for the layout states, rather than precompiled CSS. Ultimately, in a small system this will only shave off a few milliseconds in theory, if that, but I still think the workflow of using variables for conditional layouts is a good idea.

Thoughts? Hate mail? Questions? Leave a comment, I'd love to read them (not so much the hate mail).

Until next time 🌟


# Related posts

Like what you've seen? Want more? Check out similar posts on Assortment that you may find interesting:


# Comments

  1. #1 Posted:

    James Greig

    Interesting!

    I tend to use the Tachyons' approach as it's more compact and grokkable .... http://tachyons.io/docs/layout/grid/

    (so long as you can live with simplifying your grid to 10% increments or 1/4s and 1/3s :)

    Reply to this comment
    1. #1-1 Posted:

      Luke Whitehouse

      Hi James,

      Sorry for the delay in getting back to you, I've had a pretty busy month!

      I know a lot of people have been jumping over to Tachyons and similar more 'functional' systems. Looking purely at the Grid System Tachyon has, I think you've hit it on the head with your last comment.

      so long as you can live with simplifying your grid to 10% increments or 1/4s and 1/3s

      When working with larger projects generally speaking you can't assume that every project is going to conform to those set grid sizes, which can really constrain the designs. A Grid System should compliment a build, rather than restrict it IMO.

      That being said, for smaller to medium sized projects I definitely see the appeal, thanks for your comment!

# Leave a comment

No wookies will get this, its just for your Gravatar image.

Basic markdown supported, go to FAQ for more info.