I'm trying to move from tables to grids. I got this code from a wysiwyg layout tool. Clearly it's missing some key element. <div class="sheet-personal">
<h1 class="sheet-section" class="item">Personal Data</h1>
<div class="sheet-grid-container">
<div class="sheet-description">
<div class="sheet-Name">Name:</div>
<div class="sheet-NameInput"><input type="text" name="attr_Name" class="sheet-basictext"></div>
<div class="sheet-Gender">Gender:</div>
<div class="sheet-GenderInput"><input type="text" name="attr_Sex" class="sheet-basictext"></div>
<div class="sheet-Race">Race:</div>
<div class="sheet-RaceInput"><input type="text" name="attr_Race" class="sheet-basictext"></div>
<div class="sheet-Age">Age: </div>
<div class="sheet-AgeInput"><input type="number" name="attr_AgeYears" min="0" class="sheet-basictext"></div>
<div class="sheet-Years">Years</div>
<div class="sheet-Days">Days:</div>
<div class="sheet-DaysInput"><input type="number" name="attr_AgeDays" min="0" max="365" class="sheet-basictext"></div>
<div class="sheet-Weight">Weight:</div>
<div class="sheet-WeightInput"><input type="number" name="attr_Weight" min="0" class="sheet-basictext"></div>
<div class="sheet-kg"> kg.</div>
<div class="sheet-Height">Height:</div>
<div class="sheet-HeightInput"><input type="number" name="attr_Height" min="0" class="sheet-basictext"></div>
<div class="sheet-cm"> cm.</div>
</div>
<div class="sheet-location">
<div class="sheet-DoB">Date of Birth:</div>
<div class="sheet-DoBInput"><input type="text" name="attr_DateOfBirth" class="sheet-basictext"></div>
<div class="sheet-Locality">Locality:</div>
<div class="sheet-LocalityInput"><input type="text" name="attr_Locality" class="sheet-basictext"></div>
<div class="sheet-Society">Society:</div>
<div class="sheet-SocietyInput"><input type="text" name="attr_Society" class="sheet-basictext"></div>
<div class="sheet-Era">Era:</div>
<div class="sheet-EraDropdown">
<select name="attr_Era" class="sheet-skillbody">
<option selected></option>
<option>Aquarian</option>
<option>Aquarian Cusp</option>
<option>Piscean</option>
<option>Piscean Cusp</option>
<option>Ariesian</option>
<option>Ariesian Cusp</option>
<option>Tauran</option>
<option>Tauran Cusp</option>
<option>Geminid</option>
<option>Geminid Cusp</option>
<option>Cancerean</option>
<option>Cancerean Cusp</option>
<option>Leonid</option>
<option>Leonid Cusp</option>
<option>Virgin</option>
<option>Virgin Cusp</option>
<option>Libran</option>
<option>Libran Cusp</option>
<option>Scorpiod</option>
<option>Scorpiod Cusp</option>
<option>Sagittarian</option>
<option>Sagittarian Cusp</option>
<option>Capricornic</option>
</select></div>
<div class="sheet-Grace">Grace:</div>
<div class="sheet-GraceInput"><input type="number" name="attr_Grace" min="0" class="sheet-basictext"></div>
</div>
<input type="hidden" class="toggle-show" name="attr_continuumdeets" value="1" />
<div class="sheet-continuum">
<div class="sheet-DateOfInv">Date of Inv:</div>
<div class="sheet-DateofInvInput"><input type="text" name="attr_DateOfInvitation" class="sheet-basictext"></div>
<div class="sheet-Corner">Corner:</div>
<div class="sheet-CornerInput"><input type="text" name="attr_Corner" class="sheet-basictext"></div>
<div class="sheet-Fraternity">Fraternity:</div>
<div class="sheet-FraternityDropdown">
<select name="attr_Fraternity" class="sheet-skillbody">
<option selected></option>
<option>None</option>
<option>Antiquarians</option>
<option>Engineers</option>
<option>Foxhorn</option>
<option>Midwives</option>
<option>Moneychangers</option>
<option>Physicians</option>
<option>Quicker</option>
<option>Scribes</option>
<option>Thespians</option>
</select>
</div>
</div>
</div> .charsheet .sheet-personal {
display: grid;
background: url('<a href="https://blinkoz.s3.amazonaws.com/Clients/Blinxel/OtekuOtaku/Continuum/LinedPaperBG-04.png" rel="nofollow">https://blinkoz.s3.amazonaws.com/Clients/Blinxel/OtekuOtaku/Continuum/LinedPaperBG-04.png</a>');
}
.charsheet .sheet-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"sheet-description sheet-location sheet-continuum"
}
.charsheet .sheet-description {
display: grid;
grid-template-columns: 1.2fr 1.3fr 0.5fr 1fr 1.5fr 0.5fr;
grid-template-rows: repeat(5, 1fr);
gap: 1px 1px;
grid-template-areas:
"Name sheet-NameInput sheet-NameInput sheet-NameInput sheet-NameInput sheet-NameInput"
"sheet-Gender sheet-GenderInput sheet-GenderInput sheet-GenderInput sheet-GenderInput sheet-GenderInput"
"sheet-Race sheet-RaceInput sheet-RaceInput sheet-RaceInput sheet-RaceInput sheet-RaceInput"
"sheet-Age sheet-AgeInput sheet-Years sheet-Days sheet-DaysInput ."
"sheet-Weight sheet-WeightInput sheet-kg sheet-Height sheet-HeightInput cm"
grid-area: sheet-description;
}
.charsheet .sheet-Name { grid-area: sheet-Name; }
.charsheet .sheet-NameInput { grid-area: sheet-NameInput; }
.charsheet .sheet-Gender { grid-area: sheet-Gender; }
.charsheet .sheet-GenderInput { grid-area: sheet-GenderInput; }
.charsheet .sheet-Race { grid-area: sheet-Race; }
.charsheet .sheet-RaceInput { grid-area: sheet-RaceInput; }
.charsheet .sheet-Age { grid-area: sheet-Age; }
.charsheet .sheet-AgeInput { grid-area: sheet-AgeInput; }
.charsheet .sheet-Years { grid-area: sheet-Years; }
.charsheet .sheet-Days { grid-area: sheet-Days; }
.charsheet .sheet-DaysInput { grid-area: sheet-DaysInput; }
.charsheet .sheet-Weight { grid-area: sheet-Weight; }
.charsheet .sheet-WeightInput { grid-area: sheet-WeightInput; }
.charsheet .sheet-kg { grid-area: sheet-kg; }
.charsheet .sheet-Height { grid-area: sheet-Height; }
.charsheet .sheet-HeightInput { grid-area: sheet-HeightInput; }
.charsheet .sheet-cm { grid-area: sheet-cm; }
.charsheet .sheet-location {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-template-rows: repeat(5, 1fr);
gap: 1px 1px;
grid-template-areas:
"DoB sheet-DoBInput"
"sheet-Locality sheet-LocalityInput"
"sheet-Society sheet-SocietyInput"
"sheet-Era sheet-EraDropdown"
"sheet-Grace GraceInput"
grid-area: sheet-location;
}
.charsheet .sheet-Grace { grid-area: sheet-Grace; }
.charsheet .sheet-GraceInput { grid-area: sheet-GraceInput; }
.charsheet .sheet-DoB { grid-area: sheet-DoB; }
.charsheet .sheet-DoBInput { grid-area: sheet-DoBInput; }
.charsheet .sheet-Locality { grid-area: sheet-Locality; }
.charsheet .sheet-LocalityInput { grid-area: sheet-LocalityInput; }
.charsheet .sheet-Society { grid-area: sheet-Society; }
.charsheet .sheet-SocietyInput { grid-area: sheet-SocietyInput; }
.charsheet .sheet-Era { grid-area: sheet-Era; }
.charsheet .sheet-EraDropdown { grid-area: sheet-EraDropdown; }
.charsheet .sheet-continuum {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-template-rows: repeat(3, 1fr);
gap: 1px 1px;
grid-template-areas:
"DateOfInv sheet-DateofInvInput"
"sheet-Corner sheet-CornerInput"
"sheet-Fraternity FraternityDropdown"
grid-area: sheet-continuum;
}
.charsheet .sheet-DateofInvInput { grid-area: sheet-DateofInvInput; }
.charsheet .sheet-DateOfInv { grid-area: sheet-DateOfInv; }
.charsheet .sheet-Corner { grid-area: sheet-Corner; }
.charsheet .sheet-CornerInput { grid-area: sheet-CornerInput; }
.charsheet .sheet-Fraternity { grid-area: sheet-Fraternity; }
.charsheet .sheet-FraternityDropdown { grid-area: sheet-FraternityDropdown; } Anyone got any ideas?
