Don’t Use TABLE – use GRID

Stat Block Using CSS Grid

First, you need to create your HTML:

<div>
    <span>Name</span>
    <span>Score</span>
    <span>Modifier</span>
    <span>Roll</span>

    <span>Strength</span>
    <input type="text" name="attr_strength" value="10">
    <input type="text" name="attr_strength_mod" value="(floor(@{strength}/2-5))" disabled>
    <button type="roll" name="roll_strength" value="/roll 1d20+@{strength_mod}"></button>

    <span>Dexterity</span>
    <input type="text" name="attr_dexterity" value="10">
    <input type="text" name="attr_dexterity_mod" value="(floor(@{dexterity}/2-5))" disabled>
    <button type="roll" name="roll_dexterity" value="/roll 1d20+@{dexterity_mod}"></button>

    <span>Constitution</span>
    <input type="text" name="attr_constitution" value="10">
    <input type="text" name="attr_constitution_mod" value="(floor(@{constitution}/2-5))" disabled>
    <button type="roll" name="roll_constitution" value="/roll 1d20+@{constitution_mod}"></button>

    <span>Intelligence</span>
    <input type="text" name="attr_intelligence" value="10">
    <input type="text" name="attr_intelligence_mod" value="(floor(@{intelligence}/2-5))" disabled>
    <button type="roll" name="roll_intelligence" value="/roll 1d20+@{intelligence_mod}"></button>

    <span>Wisdom</span>
    <input type="text" name="attr_wisdom" value="10">
    <input type="text" name="attr_wisdom_mod" value="(floor(@{wisdom}/2-5))" disabled>
    <button type="roll" name="roll_wisdom" value="/roll 1d20+@{wisdom_mod}"></button>

    <span>Charisma</span>
    <input type="text" name="attr_charisma" value="10">
    <input type="text" name="attr_charisma_mod" value="(floor(@{charisma}/2-5))" disabled>
    <button type="roll" name="roll_charisma" value="/roll 1d20+@{charisma_mod}"></button>
</div>Code language: HTML, XML (xml)

To convert the previous TABLE code for CSS Grid, you need to:

• swap the <table> for <div>
• remove all <tr> and <td> elements
• If there was naked text, put it inside a <span> or other element.

Notice how much less code there is – you’ll never need to type <tr> or <td> again.

And now for the CSS:

div {
    display: grid;
    grid-template-columns: auto auto auto auto;
}Code language: CSS (css)

And that’s it – with just those two lines, your code produces this identical image:

Inside that div, everything has been automatically split into columns of four. But those inputs are pretty wide…

Note: don’t use this code exactly as written. Read on.