undefined | Better HN

0 pointstaftster5mo ago0 comments

So is Grid supposed to be what we should use to replace the html <table> element? That I still use to this day for layouts because CSS still sucks to me?

0 comments

psygn895mo ago

Use <table> for tabular data, but for layout you should use grid. Grid doesn't have it's own element like table does, so you have to use css to apply that display to a div.

CSS takes a bit of time to understand. It's cascading nature and how certain properties behave differently based on the html structure or display type or direction makes it tricky. I don't blame you sticking with tables for layouts for yourself - making layouts with floats was a pain. Bootstrap hid a lot of the layout pain. But today we have flex and grid to help us realize our layouts.

antod5mo ago

There were back in CSS 2 display values for table, table cell, table row etc which meant you could make divs or other block elements layout like tables did. Of course it wasn't supported in a certain browser with 90% market share.

Akronymus5mo ago

> Grid doesn't have it's own element like table does, so you have to use css to apply that display to a div.

Well, OOTB, yeah. I personally like to make use of custom html elements a lot of the time for such things. Such as <main-header> <main-footer> <main-content> <content-header> etc, and apply css styles to those, rather than putting in classes onto divs. Feels a lot more ergonomic to me. Also gives more meaningful markup in the html. (and forces me to name the actual tags so I use much less unnecessary ones)

moron4hire5mo ago

One of the many things I hate about React: can't easily create custom elements that truly exist in the DOM so I can style them in CSS.

WorldMaker5mo ago

Recent React round-trips custom elements better now. You just have to remember the standard's rule that all custom elements need to be named with dash (-) inside them.

dsego5mo ago

It's more like a comic book, you define the layout and the elements slot into that. You can define how many rows and columns your comic has and then you can make some panels fit exactly into one spot, or you can have panels that span more than one row or column. So it's more of a 2d design system.

https://l-wortley0811-dp.blogspot.com/2010/10/comic-layoutsj...

paulhebert5mo ago

No. The table is meant to hold tabular data like a spreadsheet. It has special behavior for people who use tools like screen readers because they have vision impairment.

CSS grid is a powerful layout tool. If you think CSS sucks I encourage you to brush up on the newer developments. Flex box and grid and many other newer tools solve a lot of the classic pain points with CSS and make it a pleasure to use if you invest the time to learn it

j / k navigate · click thread line to collapse