Don’t Use TABLE – use GRID

How Does it Work?

CSS Grid can have a lot of complexity, but for basic use, it’s very simple. All you need to think about is this line:

grid-template-columns: auto auto auto auto;Code language: CSS (css)

The grid-template-columns command tells your browser how many columns to sort it into. You could have, for instance,

grid-template-columns: 120px 80px 40px;Code language: CSS (css)

That would tell your browser to sort every element in that div into 3 columns, and set the first column to 120 pixels, the next 80 pixels, and the last 40 pixels.

With grid-template-columns, you declare how many columns there are, and how wide each is.

You just set a width for each column, and that number of columns is created.

Using CSS Grid you have a lot more control over layout, so much more easily than you ever would with TABLE.

Targeting Specific Containers

There’s a downside to the code. As written, it will try to turn every div into a 4 column grid. You need to make sure you are targeting only the specific div you need. You do that by adding a class, which you can name anything you want. This needs a change to both the HTML and the CSS.

Add a class to the HTML:

<div class="stats">Code language: JavaScript (javascript)

And to the CSS

div.stats {Code language: CSS (css)

If you are using legacy code that needs .sheet- added to the class name in CSS, that would be:

div.sheet-stats {Code language: CSS (css)

With these changes, your browser will look for the div with a class “my-stats” and apply the CSS to it.

Unfortunately, these changes make the layout a little less than pretty:

The grid is working, but there’s a lot of unnecessary spacing. Also, on roll20, inputs have a fixed width – they are very wide by default – and you need to change that. Here’s the entire updated CSS, with a picture and explanation.

div.stats {
    display: grid;
    grid-template-columns: 80px repeat(3, 60px);
    column-gap: 5px;
}

div.stats input {
    width: auto;
}Code language: CSS (css)

This code sets all inputs inside div.stats to width: auto, which means they take their width from the grid columns.

In the grid, I’ve added specific pixel widths, so I can have the column width exactly as I want it. The repeat(3, 60px) just says repeat “60px” 3 times. It’s a great way to avoid typing the same code multiple times.

Finally, I added the column-gap property, to put a gap between each column. You can set that to whatever width you want.

There’s still tweaking you could do (like changing the headings to h3 or h4 instead of span, and setting text-align:center on the inputs), but that’s not what this post is about.