I'm new to R20 sheets and CSS grid but not HTML and CSS in general, trying to do some updates to an existing sheet including turning what's currently just a big pile of unformatted <div>s into CSS Grid elements and adding some new features. Currently I'm trying to set up a grid with named areas that will have 4 columns and two rows; the first row has an area in each column, and the 2nd row should be empty in the 1st and 4th column but span the 2nd and 3rd. HTML looks like this: <div class="powers-grid-container"> <div class="cps"><input type="number" name="attr_ability_cost" title="ability_cost" value="0"/></div> <div class="power-desc"><input class="power-desc" type="text" name="attr_ability_desc" title="ability_desc"/></div> <div class="ips"><input type="number" name="attr_ip_cost" title="ip_cost" value="0"/></div> <div class="actions"><button type="roll" name="roll_power_desc" value="&{template:powerdesc} {{desc=@{ability_desc}}}" class="tochat"></button></div> <div class="stat-mods"> Do some stuff </div> </div> CSS: .sheet-powers-grid-container { display: grid; grid-gap: 4px; grid-template-columns: 75px 505px 75px 75px; grid-template-columns: auto; grid-template-areas: "cps power-desc ips actions" ". stat-mods stat-mods ."; } .sheet-powers-grid-container .cps { grid-area: cps; } .sheet-powers-grid-container .power-desc { grid-area: power-desc; } .sheet-powers-grid-container .ips { grid-area: ips; } .sheet-powers-grid-container .actions { grid-area: actions; } .sheet-powers-grid-container .stat-mods { grid-area: stat-mods; } .sheet-stat-mods { border: 1px dashed black; } Results I'm getting vs what I expected: Based on my understanding of the examples from the guide , it seems like this should work. What obvious dumb thing am I missing? :)
