Single Post

Grid System decision making

Image of a grid

When building the site I wanted to make it as dynamic and maintainable as possible. It was obvious pretty early on that I would need to implement a grid system. There are hundreds of grid systems out there. There are some that I really like such as the inuit.css grid system courtesy of csswizardry. The problem is that there are usually limitations with both fixed (pixel) grid systems and percentage (fluid) grid systems. I won’t go into the details of these systems as they all have their own different quirks and operate very differently.

Problems with pixel grid systems;

  • Nested grids can get quite confusing as you may need to consider the parent grid. Requiring the user to take extra thought.
  • You are usually limited to a fixed width page. If the page had a sidebar the grid wouldn’t conform to the full width.
  • Solutions to the above problems could cause bloated code to solve these issues.

Problems with percentage grid systems;

  • Potential problems nesting grids due to percentage gutter sizes reducing in size.
  • Different sized gutters on different page widths.

These problems are both based on my experience with the inuit CSS grid systems. Both are great, efficient and use less code than most other systems (not to mention the .first / .last class on the respective elements) and I’ve implemented both systems in my work in the past. I do however always find myself trying to work my way around the limitations regarding widths and gutters and have to come to a compromise.

When I started building this site I came across a tweet from @csswizardry regarding fluid grid systems with fixed gutters. Perfect! All my problems solved! All of my problems except the box-sizing: border-box statement that would break on pre IE8 browsers. Regardless of this I set about building this into a grid-12 system.

Using this method allowed me to ensure that if I wanted to make a block a third of the width I simply use the percentage value 33.33%, half would be 50% and so on. The gutters would be created using the padding and the border-box would contain all of the gutters properly.

I was a little uncomfortable that the site would completely break using this system, I didn’t want to push IE users into quirks mode due to the other potential problems that it causes, so I eventually came to the decision to add an extra <div> to the grid set up. The extra <div> makes it possible to still use logical percentage widths and extend the gutter sizes to be larger or smaller if required. The benefit of the extra div is that the system allows nesting without nested gutters breaking the layout. Extra classes can also be added to the boxing <div> to help with box model and styling requirements. I feel that this system works as the best compromise between usability and compatibility, and keeps the system DRY.

The final code can be seen below;

HTML

<div class="grids">

	<div class="grid-6">
		<div class="grid-content">
			<!-- Contents of the box go here -->
		</div><!-- /.grid-content -->
	</div><!-- /.grid-6 -->

	<div class="grid-4">
		<div class="grid-content">
			<!-- Contents of the box go here -->
		</div><!-- /.grid-content -->
	</div><!-- /.grid-4 -->

	<div class="grid-2">
		<div class="grid-content">
			<!-- Contents of the box go here -->
		</div><!-- /.grid-content -->
	</div><!-- /.grid-2 -->

</div><!-- /.grids -->

CSS

/**
 *Column container
 */
.grids {
  clear: both;
  margin-left: -2em;
  list-style: none; /* So we can make grids out of lists. */
  overflow: hidden; /* Clear the floats */
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  float: left;
}

.grid-1, .span-1 { width: 8.33% }
.grid-2, .span-2 { width: 16.67% }
.grid-3, .span-3 { width: 24.99% }
.grid-4, .span-4 { width: 33.33% }
.grid-5, .span-5 { width: 41.65% }
.grid-6, .span-6 { width: 50% }
.grid-7, .span-7 { width: 58.31% }
.grid-8, .span-8 { width: 66.66% }
.grid-9, .span-9 { width: 75% }
.grid-10, .span-10 { width: 83.3% }
.grid-11, .span-11 { width: 91.63% }
.grid-12, .span-12 { width: 100% }

.grid-content { /* Add this class to the extra <div> */
  margin-left: 2em;
}

.grid-box {
  border: 1px solid #efefef;
  padding: 0.5em;
  margin-bottom: 2em;
}

.grid-border-bottom {
  border-bottom: 3px solid #ef570c;
}

/* Smaller Gutters */
.grids.less-gutter {
  margin-left: -1em;
}

.grids.less-gutter .grid-content {
  margin-left: 1em;
}

/* Larger Gutters */
.grids.more-gutter {
  margin-left: -3em;
}

.grids.more-gutter .grid-content {
  margin-left: 3em;
}

It took me ages trying to justify the use of the extra <div>. I eventually decided it can be justified as it is usually required to add extra elements for box model related work in conventional systems.

The final thing I’d like to point out is that from my testing is that the nesting in this type of system seems to work better than in other implementations. If the parent grid changes size, the nested elements will still fill the parent width. Regardless of how deep the grid is nested, each grid item will still calculate to 1/12th of the container.

Hopefully that all makes sense. Please leave feedback as to whether you agree, disagree or use a similar system.

Leave a Reply

Your email address will not be published. Required fields are marked *