New things CSS grid brings to the </table>
Well, At Least It’s A Little Bit Easier Than Chess. I’ll give you that.
Here’s a list of my best web development tutorials.
Complete CSS flex tutorial on Hashnode.
Ultimate CSS grid tutorial on Hashnode.
Higher-order functions .map, .filter & .reduce on Hashnode.
You can follow me on Twitter to get tutorials, JavaScript tips, etc.
This tutorial is sponsored by Learning Curve Books. Grab a copy of this new exciting volume explaining every single CSS property in common use and supported by modern browsers.
CSS — Visual Dictionary
Click here for the discount page.
What is this? A CSS desk reference to remind you of many common CSS properties with the accompanying visual diagrams explaining how they work.
Interested? Grab your copy here.
— JavaScript Teacher
Follow me @js_tut on Twitter.
CSS Grid Tutorial About How From Now On We Will All Design Web Layouts Using Table HTML Element from the 1990’s. Yeah. That <TABLE>.
This CSS grid tutorial was inevitable. Since this is such a hot topic these days. This is the JavaScript Teacher’s interpretation of CSS grid. Like it or hate it.
CSS Grid vs. Table — In Hand To Hand Combat
Still don’t believe me? Well, I created these diagrams...
Okay… But CSS Grid Can Occupy Multiple Cells!
Hmm. What an innovation! It only took 20 years to come up with it.
They Can Take Away Our Lives… But They Can Never Take Away Our COLSPAN and ROWSPAN:
Okay Braveheart. Maybe it is just me. But meanwhile… the humble attributes known in pair as colspan and rowspan… seem to have suspiciously similar functionality:
But Grid Has Gaps!
Hmm. Sure, the CSS Grid does have gaps. I guess that’s the new thing about the grid? Let’s take a look at what it all comes down though:
Well it does kind of look different. Doesn’t it? And if we slapped some margin onto the CSS Grid it would look just like the table. And I guess that’s nice.
Okay… But Grid Is Responsive! Haha, Got You! Right?
Hmm. Well you got something. But let’s take a look at the reality of things.
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:
Grab your copy and save $10!
:-)
