What is this ? table-layout: fixed; with width: 100px; and width: 100%; seem to create an identical “grid.”

Do you realize you could do this 20 years ago?

Are CSS Grid inventors really creating anything innovative here? Was it necessary to load element.style object with even more properties that do exactly the same calculations — already present in existing properties?

Well maybe it was or maybe it wasn’t.

But wait… I did notice that there is one difference by default…

CSS Grid’s Box Sizing Is Automatically INNER

Now we’re talking!

If your grid container is 300 x 300 in dimension adding a 1px border will not make it 302 x 302 (it would do that by default to <table> and other prehistoric HTML elements.) Finally the developers of CSS are waking up to what’s right.

This means that CSS grid’s box-sizing is border-box’ish by default. Yay!

That’s a good thing. And all the more reason to start using CSS Grid.

Woah… wait… I did notice another difference… And this is my favorite one!

CSS Grid Content Align IS A Valuable Addition

Any web developer who has been around has figured this out by now that the greatest problem with HTML in general is vertical align. And, well… align in general. I am quite impressed by how CSS Grid gracefully solves this problem.

This is probably the most valuable change in years to CSS layout properties as pertains to column-based website layouts. (Uh, 99% of them?)

Grid is a lot more mindful of controlling content location than table cells.

Let’s take a look.

This is a bit better than your standard display: block implementation. In fact the new thing you can do looks a lot like display: inline-block for the right hand side of the element without having to use float which can probably find some use in a real case scenario.

The Multi-Directional Float On “Cellular” Level

That’s just the best way I can describe this discovery. It applies only to the content areas inside the grid cells themselves.

And finally… dabbling around with these properties you will realize that the grid offers something I can refer to as multi-directional float. I think that this is really useful for multi-device layout design.

And in conclusion…

Aside specifying parameters using different properties perhaps CSS Grid doesn’t really offer anything new in the way of how it handles cellular grid layouts.

Its strength appears to lie primarily in how you can arrange content within dynamic content cells which — without doubt — is a lot more versatile than the HTML table can ever do, without hacks.

Things That Only Grid Can Do

I have just started getting into CSS grid myself a couple of weeks ago — and these are my discoveries so far. I am not making any claims that this tutorial is 100% accurate or complete. I am always looking for improvements and help from the community in hopes we can help people learn about new things.

So what are other new, important and practical features that CSS Grid brings to the table? Your discoveries, comments & help will be appreciated.

If you know what they are please leave a comment! If we gather any other important cases I can include them in this tutorial.

And if you take only one thing from any of this…

Never design your layouts using HTML tables! :)

This article was sponsored by Learning Curve a small indie book publishing company focusing on software documentation.

Check out my book CSS Visual Dictionary.

I am currently doing a 5-day special discount at:

> Learning Curve Books.

Grab your copy and save $10!

:-)