A New Buzz Word is Born: CSS Grids
CSS Grids seems to be the word of the week on the Internet. Or maybe even word of the year.
Grid based layouts isn’t something new. Many of us remember the table based layouts that came with HTML 4 when web developers started abusing tables. With XHTML 1 we started the tedious job to move away from these tables and replaced them with div layers.
It was soon realized that the div layer solution wasn’t perfect. It’s hard to position the divs where you wanted them but still let them be dynamic in terms of height and relative position. The answer to this was floats and the magic of clearfix.
Still, the solution wasn’t perfected. You still had to redefine every single CSS element each time you started a new project. You still had no base to stand on and there was no consistency between the elements, each of them lived a life of it’s own. Thus CSS Grids was invented.
CSS Grids is really just a div layer solution that mimics the behavior of tables.
The idea is to think in terms of rows and columns instead of width and height. This is indeed a nice solution once you have decided upon the grid size for your project. You can easily position your elements and align the nicely to each other. As long as you keep it simple.
When you try to put a more complex layout into the grid you’ll very soon stumble across several obstacles that, in the end, will render you to write more CSS instead of less. You gain the alignment but loose every little bit of flexibility there is. Let me give you a quick example of CSS Grids gone bad:
Imagine that you have a that is 10 columns wide and you divide that grid into three parts: 3 columns, 4 columns and 3 columns. The idea here is that 3+3+4=10 so the total width of 10 and 3+3+4 is the exact same.
<div class="10-columns"> <div class="3-columns">Some Content</div> <div class="4-columns">Some Wider Content</div> <div class="3-columns">Some Content</div> </div>
This will give you a one row layout like:
Some Content Some Wider Content Some Content
Now, let’s say you want to add a border around the center column.
You’d type something like:
<div class="10-columns"> <div class="3-columns">Some Content</div> <div class="4-columns" style="border: 1px solid red;">Some Wider Content</div> <div class="3-columns">Some Content</div> </div>
Now, what happens here is that the layout will collapse into two rows instead of one like:
Some Content | Some Wider Content |
Some Content
The reason behind this is very simple: the width of an element is calculated by adding width+padding+border together. So, 3+4+3 != 10 if 4 has a border of 1+1px attached to it. The layout breaks.
Right here you can argue that the grid shouldn’t be used for layout, only for positioning.
Let’s say we agree on that and rewrite the markup accordingly:
<div class="10-columns"> <div class="3-columns">Some Content</div> <div class="4-columns"> <div style="border: 1px solid red;">Some Wider Content</div> </div> <div class="3-columns">Some Content<;/div> </div>
Now, the above markup would work just fine. But:
- Your center column wouldn’t be as wide as you expected it to be. You can’t put two new columns inside it width the widths 2+2 or 3+1 becuase yo’d be two pixels short. What you’ve done here is literlly destroyed the grid layout for this container.
- What’s more interesting is that you have added a new element that really is unnecessary for all the wrong purpose. You make the markup more complex and the page weight increased slightly. And above all: in order to make the grid work you had to add a little bit of extra code when the grid is supposed to reduce both time spent and code written!
I was honestly thinking about using a grid approach on this blog until I ran into this, and several other complications, while trying to implement it on a website at work. The idea is great but it involves so many special cases and detours that it’s not worth the trouble. I’ll keep using my floating divs with fixed width, clearfixes and work magic by using the margin attribute until something new comes my way. Something that will actually give me a decent tool to work with without giving up the flexibility that makes the WWW so fun to work with.
