A CSS Grid Responsive Table Experiment
Just a personal experiment with CSS Grid to achieve something that, in theory, should work.
I remember it would have been possible to use one grid for this thing, but the main issue seems to be the dropping of subgrid
from the spec and moving it to level 2.
So we can do this in a few ways:
- Use a full
<table><tr><td>
for large views- Set
table
todisplay: block;
,tr
todisplay: grid;
. We can turntr
to a card for smaller view.
- Set
- Use one grid for large views but group each row using
div
(liketr
) and set them todisplay: contents;
.- For smaller view, set those grouping
div
s todisplay: grid;
.
- For smaller view, set those grouping
- Use named zones for the whole grid. Something like:
grid-template-areas: repeat(8, "Name Cores Threads Clockspeed Turbospeed TDP Price");
- Since it doesn't support repeat, so we can just loop it in js and add row numbers to the zone names. This will work really nicely, but a bit of hassle to set up. Lastly, can't be done without js.
- The best way. Use
subgrid
. However, as of now, only latest FF has implemented it.
- Implement all these methods for comparison.