Hey, so I am working on a new sheet for the SWRPG and I have run into a CSSGrid issue I can't get around. I am brand new to html, css, and grid but I've been able to get my sheet layout (all the sections in place) how I want it so far. I am now going grid-by-grid to "finish" each section. For the top Dice Pool section, I cannot do anything to affect the inputs. I want to put the inputs on 2 rows, but nothing is working. So here I am. Sheet looks like: The relevant html is: <div class="sheet-main">
<div class="dice section">
<h2>Dice Pool</h2>
<div class="dice-inputs">
<input type="number" name="attr_blue" max="10" min="-10" value="0">
<input type="number" name="attr_green" max="10" min="0" value="0">
<input type="number" name="attr_yellow" max="10" min="0" value="0">
<input type="number" name="attr_white" max="10" min="0" value="0">
<input type="number" name="attr_black" max="10" min="10" value="0">
<input type="number" name="attr_purple" max="10" min="0" value="0">
<input type="number" name="attr_red" max="10" min="0" value="0">
<input type="number" name="attr_up_roll" max="10" min="-5" value="0">
<input type="number" name="attr_down_roll" max="10" min="-5" value="0">
<input type="number" name="attr_up_diff" max="10" min="-5" value="0">
<input type="number" name="attr_down_diff" max="10" min="-5" value="0">
<button type="roll"></button>
</div>
</div> The relevant css is: .sheet-main {
display: grid;
width: 800px;
height: 900px;
grid-gap: 4px;
grid-template-columns: 100px 1fr 1fr 1fr;
grid-template-rows: 100px 35px 200px 100px 100px 1fr 100px 100px;
grid-template-areas:"dice dice dice blank"
"tabs tabs tabs tabs"
"char char char info"
"stats stats stats stats"
"attri attri attri attri"
"skill skill skills skills"
"weapon weapon weapon weapon"
"talent talent power power";
}
/*----------------- GENERAL CSS ------------------*/
textarea {
width: 90%;
height: 85%;
}
label {
font-size: 8pt;
}
h2 {
font-size: 14pt;
}
.sheet-section {
padding: 5px;
}
.sheet-flex-col {
display: flex;
/*justify-content: flex-start;*/
}
.sheet-flex-center {
align-items: center;
justify-content: center;
}
/*--------------- Dice Pool CSS --------------------*/
.sheet-dice {
grid-area: dice;
}
.sheet.dice-inputs {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 50px 50px;
} The only thing I can think of is sheet.dice is specified to a sheet area. But from what I've seen putting the inputs into a div should still allow the input-div to be a grid. Sorry if I'm unclear. As I said, still very very new to all this.
