Hey all, I am wondering if someone could take a look at my CSS and HTML for a character sheet and help me understand why the grid is not being properly laid out? The CSS for this sheet is adapted from the example Grid-based sheet, and the HTML is super simple. I wanted to get a handle on how to do this before I tried anything super fancy. Here is the CSS: /*----------------- MAIN LAYOUT ------------------*/
.main {
display: grid;
width: 900px;
height: 1200px;
grid-gap: 4px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 90px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:"header header header header header header"
"bonus bonus common common traits traits"
"bonus bonus common common truths truths"
"vulnerability vulnerability common common truths truths"
"vulnerability vulnerability common common truths truths"
"resistance resistance common common truths truths"
"resistance resistance common common truths truths"
"gettingaround gettingaround common common truths truths"
"gettingaround gettingaround common common truths truths";
}
/*----------------- GENERAL CSS ------------------*/
section {
padding: 5px;
border-style: solid;
}
/* CSS Flexbox styling, used for adjusting how content inside section behaves */
.f-col {
display: flex;
flex-direction: column;
}
.f-row {
display: flex;
flex-direction: row;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.nowrap {
display: flex;
flex-wrap: nowrap;
}
.f-center {
align-items: center;
justify-content: center;
}
/*----------------- Text & Input styling -----------------*/
@import url("<a href="https://fonts.googleapis.com/css?family=Lexend&display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Lexend&display=swap</a>");
/* these are for overwriting default CSS that comes from Roll20 */
.charsheet * {
font-family: "Lexend";
}
.charsheet h3{
text-align: center;
}
.charsheet label{
margin: 3px;
padding: 3px 0 0 0;
}
.charsheet input[type="text"], input[type="number"]{
margin: 2px 4px;
}
.charsheet textarea {
width: 95%;
height: 85%;
}
/*------------- Section-specific CSS -------------*/
.header {
grid-area: header;
background-color: olive;
flex-direction: column;
}
.bonus {
grid-area: bonus;
background-color: orange;
justify-content: space-evenly;
}
.traits {
grid-area: traits;
background-color: orange;
justify-content: space-evenly;
}
.truths {
grid-area: truths;
background-color: orange;
justify-content: space-evenly;
}
.common {
grid-area: common;
background-color: brown;
}
.vulnerability {
grid-area: vulnerability;
background-color: green;
}
.resistance {
grid-area: resistance;
background-color: grey;
}
.gettingaround {
grid-area: gettingaround;
background-color: chocolate;
} Here is the HTML: <main>
<section class="header f-center">
<input name="attr_archetype" type="text" />
</section>
<section class="traits f-col nowrap">
<label>Traits:</label>
<input name="attr_trait1" type="text"/>
<input name="attr_trait2" type="text" />
</section>
<section class="truths">
<label>Truths:</label>
<textarea name="attr_truths"></textarea>
</section>
<section class="common">
<label>Notes:</label>
<textarea name="attr_notes"></textarea>
</section>
<section class="bonus f-col nowrap">
<label>Archetype Bonus:</label>
<label>Name:<input name="attr_archetypebonus" type="text"/></label>
<textarea name="attr_bonusnotes"></textarea>
</section>
<section class="vulnerability">
<label>Vulnerability:</label>
<textarea name="attr_vulnerabilitynotes"></textarea>
</section>
<section class="resistance">
<label>Resistance:</label>
<textarea name="attr_resistancenotes"></textarea>
</section>
<section class="gettingaround">
<label>Getting Around:</label>
<textarea name="attr_gettingaroundnotes"></textarea>
</section>
</main>
