One of the beautiful things about CSS is the ability to do the same thing in many different ways. It allows a certain amount of expression in styles. There are different ways to style layouts for pages as well as other elements within them. In this article I want to review grid system techniques and outline their strengths and weaknesses. The findings of this article are just through my own learnings, so please do comment if you have any input on this.

Floats

The float grid is probably the one that has been around the longest and consequently probably the most used one. It allows for floating elements to sit next to one another until the row width is used up or a ‘clear’ is imposed to force a new row.

Example


19302

Advantages:

  • Flexibility
    There is a great amount of flexibility including variable lengths in rows with no extra input needed.
  • Standalone capability
    There is no need for a defined parent in CSS that dictates any sort of style. The floated elements will just float in whatever width they have allowed by the parent scope.
  • Fluid grids
    With the right breakpoints in place, pretty much any layout combinations are possible. You can change any column count by simply changing column widths or adding / removing clears using nth-child selectors.

Disadvantages:

  • Clears needed
    A ‘clear’ property is needed on an element or a pseudo element to ensure the parent element knows what size to be based on the floated content.
  • Widths
    To get equal sized columns you will need classes like ‘col-1-4’ (25%) to maintain uniform sizes on your columns. Not a huge issue but a slight disadvantage on table-cell elements. That said, these classes can be used elsewhere too without a ‘left’ or ‘right’ float to just restrict width.
  • Vertical alignment
    Although vertical alignment is possible, it is often a little ‘hacky’ and not as neat as other grids. By default everything is just aligned to the top vertically.

Table-Cell

Table cell is a neat way of creating layouts using grids. The rule to remember with a table display is that all a table row always have to be full. If you are creating an element within the table row element that is 20% width, that width can only be applied if the rest of the row is filled. This is a strange concept to get around if you come from a float mentality where any width goes at any time. It is best to think of this method like an actual HTML table, but without the all the HTML tags that that required.

Example


19302

Advantages:

  • Lightweight DOM
    To get equally proportioned columns is incredibly easy and you do not need any width definitions.
  • Vertical alignment
    This is a huge selling point for the table-cell layouts as this becomes incredibly easy with the ‘vertical-align’ property which can be applied to any table cell.

Disadvantages:

  • Filling tables
    Tables have to have each row filled. Where as with floats you can get away with incomplete rows, with table layouts you have to fill the remaining space. This is seen in the example CSS above with the ‘.row.incomplete:after’. If you have an incomplete row, you also need the similar class to define a width (much like ‘.col-1-4’).
  • Fluid grids
    A big issue with table layouts in CSS is the responsive nature of columns. Say for example you want a 6 column layout on your desktop version and a 4 column layout on some tablets. With float, you can simply add the breakpoint and target the ‘.col-1-4’ selectors, but because of the explicit ‘row’ definitions within the css table layouts which force new rows, you can only go to multiples of the original number (6 in this example).
  • Row wraps
    There is no way to wrap the contents of 1 row onto another row without changing to a different display method (e.g. block). For this reason, row wraps are needed around each row of columns, which creates the need extra logic if looping through column data to insert ‘row’ wrappers.

Inline Block

Using inline-block as a method for grids gives a good mix of features from the float and table-cell appearances.

Example


19302

Advantages:

  • Fluid grids
    Like the floating method, inline-block is fantastic for this. There is a degree of flexibility that matches floats allowing for changeable column sizes. The lack of a ‘row’ element gives the freedom to create your own rows based on dynamic column widths.
  • Standalone capability
    Just like the floats, there is no need for a defined parent in CSS that dictates any sort of style. The floated elements will just float in whatever width they have allowed by the parent scope.
  • Vertical alignment
    Like the table-cell method this is a handy feature and a clear advantage over floats.

Disadvantages:

  • Whitespace
    The main problem with inline-block is the whitespace. If you leave any space between your inline-block elements in your code you will end up with a space on the rendered HTML. This is why the example above shows the end of the element and the start of the element on the same line, i.e. </a><a ..>. Another technique to get around this is to open a comment at the end of the item and close it before the start of the next, this approach at least allows for neater line separation. This is probably the preferred method if looping in PHP as it negates the chance of whitespace. The OCD nature of my coding means this is a little annoying for me, but it works well so I should probably just get over that.

Flex

Enter the new boy! Flex has been / is being created to be the solution to flexible grids and layouts. Flex brags a variety of features including; vertical alignment, fluid grid compatibility and even the ability to re-order content which is a pretty distinct advantage for responsive page layouts (although arguably, in most instances well thought out content shouldn’t really need reordering).

Example


19302

Advantages:

  • Fluid grids
    As with inline-block and floats, flex is very good at handling fluid grid layouts. In the same way as inline-block and float, new width definitions mean different column-per-row layouts.
  • Vertical alignment
    In the same way as inline-block and table methods vertical alignment allows for columns to be displayed in a measured and balanced way.
  • Reordering
    With flex you can reorder the contents of the flex container. None of the other ways of doing grids allow for this unless you introduce javascript fixes.
  • Horizontal alignment
    It is easy enough to align columns if they do not fill to whole row. This is a great feature only matched in it’s simplest form by inline-block.

Disadvantages:

  • Browser support
    Internet explorer 8 and 9 are not supported. Shock!
  • Early adoption
    Because this is a new method it is somewhat of a risk to be an early adopter. It is good to use it on test projects to learn it, but whether it is ready for actual use yet, especially with IE9 support non-existent, is a doubt.

To summarise…

I suggest that we still need to utilise the range of grid systems available. Here are some simple rules for grids that I will probably try to follow going forward:

  • Is the grid going to change and the column count not be a multiple the original column count? – Use float or inline-block
  • Do you need to vertically align content across rows? – Use inline-block or table
  • Is the grid’s column count always going to be a multiple of the original column count? – Use table
  • Do you want to have the best of everything and do not need to worry about supporting IE9 or earlier browsers? – Use flex
  • Are you also sick of the little limitations of the other grid systems and you need some ‘flexual healing’? – Use flex

Leave a Reply

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

Get in touch

Please get in touch if you would like a quote or to talk through a potential project.