Don’t Use TABLE – use GRID

Multiple Grids

Everything in a grid needs to be in an HTML element (like span). But divs are also HTML elements – this means you can arrange divs inside a div. If, for instance, you had:

div.my-sheet {
    display: grid;
    grid-template-columns: 300px 200px 200px;
}Code language: CSS (css)

This will look for the div with class “my-sheet”, and will look at what’s inside it. If there are 6 divs inside it, it will arrange them into 3 columns, 2 deep.

Then those divs inside can also be given display:grid and have their own contents arranged into a grid.

There are a lot of other things you can do with Grid – having one row with 2 items and another with 3 items, having items that span over more than one row, setting gaps between each column, and so on. Using CSS Grid you can arrange an entire sheet very easily. But that’s a topic for another post.

Conclusion

For individual blocks of content, like your bio or stats and skill sections, Grid is the perfect way to arrange in a table of rows and columns. Just remember these lines of CSS:

div.whatever-my-class-is {
    display: grid;
    grid-template-columns: 80px 60px; /* or whatever columns you want */
    column-gap: 5px; /*optional, but does make grids prettier */
}Code language: CSS (css)

And never need to type </td></tr><tr><td> ever again.

The main point to learn:

CSS Grid is far, far superior to TABLE, even easier to use, and takes a lot less code.

Once you start using Grid, you’ll likely have questions. You can contact me directly, but you are probably better off asking in the Roll20 Forums where you’ll benefit from the support of an entire community of knowledgeable and helpful people.