What's the difference between tables and css grid


What’s the difference between the CSS properties using display: grid and using the tags inside a <table> element? Is there a time I should use one or the other?

grid-template is the same as the <td> and <tr> elements. Grid Gap is the same as margin. Changing the width is the same as giving them a class, same with height.


There seem to be pros and cons for each method.


Grid is more powerful then table, this is noticeable when fully grasping grid. I can see why in the beginning it looks similar to table.

Source order independence. This is the killer feature that grid brings to the table. You can design a page so that it flows decently when grid isn’t supported as a fall back, but when there is support has a completely different layout on mobile and desktop without modifying the DOM.

grid is certainly more complex, so might not always be the best fit, but grid wins hands down when it comes to designing an entire page, i wouldn’t use a table for this.

on this page: http://jensimmons.com/, the first video (designing with grid) is really good, worth watching.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.