Design Lunatic

“End” Classes in Grid Systems and How To Get Rid Of Them

In my opinion, grid systems are great. They provide an easy way to get started with your next project, and can simplify the developing process behind a site by a lot. However, there are some problems associated with them. Most of them are subject for a seperate post, but today, we’ll go over one of the big ones: the required classes that signify the first and last elements in a row of elements. The “first” and “last” classes, or the “start” and “end” classes.

Now, let me explain what the “end” class is for. In most grid systems released nowadays, each “grid” element has a margin-right. The value of that margin-right is the width of the gutter, which is the space between two elements beside each other. For this example, let’s say 20. Now, if each grid element has a margin-right of 20, what would happen to the last element in a row such as this one?

<div class="grid_12">
	<div class="grid_4">
		<p>A box with a width of 300 and a margin-right of 20.</p>
	</div>
	<div class="grid_4">
		<p>A box with a width of 300 and a margin-right of 20.</p>
	</div>
	<div class="grid_4 end">
		<p>A box with a width of 300 and a margin-right of 20.</p>
	</div>
</div>

If the “grid_12″ class has a width of 940, there wouldn’t be enough space for all three elements. 320×3 is 960. The 20px margin-right of the last box pushes it onto the next line.

It’s generally pretty annoying to have to add an “end” class to your last element. Today, I’ll show you how to get rid of this nusiance.

First off, here’s some sample CSS that illustrates the problem. We’ll then improve this CSS to make it work without the “end” class.

.grid_12 {
	width: 940px;
}

.grid_4 {
	width: 300px;
	margin-right: 20px;
}

.end {
	margin-right: none;
}

As you can see, the “end” class gets rid of the margin-right of the last box so that it doesn’t go onto the next line. Here’s a better way to do this:

.grid_12 {
	width: 940px;
}

.grid_4 {
	width: 300px;
	margin-right: 10px;
	margin-left: 10px;
}

This way, we don’t need the “end” class. Each grid element has a margin-left of 10 and a margin-right of 10. Now, here’s how this works: the first element in a row is 10px away from the next box, to its right. However, the next box has a margin-left of 10px as well. The two 10px margins add up to 20px, which results in the 2 boxes being 20px away from each other, the way it was originally intended.

This technique is used in my new grid system, BluCSS.