Menu
Is it good practice to use CSS display: grid instead of the html tag <table>?
There are many times when <table> in responsive design is difficult to use. Especially for complex shop basket tables and handling colspan etc. However with css-grid it's an easy one.
I see some problems in styling rows like <tr> for table. There are ways with nth-child stuff. What do you think about it?
212
Data Grid Features While a table would not offer much more than a sticky header, usually showing the column definitions, the data grid can be much more sophisticated. The same pattern continues to sort (multi-column with precedence)and data selection. The latter is now cell-based instead of row-based.
You can turn on the grid button located in the div which has display: grid declared. All you have to do is go to your browser's developer tools (mine is Microsoft Edge which is based on Chromium). You will see a button like this. And then you can code and test as you wish.
For a major layout style, you could use CSS grid, since it's a two-dimensional layout system, you can work with both rows and columns very easily. And for a more simple layout style, you can use flexbox, a one-dimensional system, it's very helpful to work with rows.
Flexbox mostly helps align content & move blocks. CSS grids are for 2D layouts. It works with both rows and columns. Flexbox works better in one dimension only (either rows OR columns).
If you know CSS grid and are comfortable using it, there is no good reason not to use it. Support is good enough CSS grid support at this point
In fact I highly recommend using anything over <table> for layout. Tables should be used for tables with data in it. Flexbox is also a great option depending on the situation. Ideally you would know when CSS grid is appropriate and when flexbox is, or when both can be used in tangent.
In conclusion it is 2018 and tables should be used as little as possible for this purpose. Move towards the future with flexbox and CSS grid.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
