I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define the necessary columns.
.AllScores{
display: grid;
grid-template-columns: 450px 200px auto 50px 50px 50px 50px 50px;
grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
}
.AllScores_text{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background-color: #289e19 ;
text-align: right;
}
.AllScores_inputs{
grid-column: 2;
grid-row: 1;
background-color: #199a9e ;
text-align: left;
}
So, AllScores serves as my "grid container," with AllScores_text representing the first cell in the grid, and AllScores_inputs representing the second cell in the first row.
Starting simple due to being new to CSS and HTML, I encountered issues with grid-column/row-start/end not working, even after trying just using grid-column and grid-row.
I require the flexibility of a grid for future adjustments; while I could use a table for now, I may need to merge cells later on, hence the exploration of grids.
Below is the HTML code:
<div class='AllScores'>
<form action="{{ actual_age_range }}/Scores_Gathered" method="post">
{% csrf_token %}
<div class='AllScores_text'>
<label for="DM1_Pref_Hand">Score DM1 - Tirelire (Main préférée) : </label>
</div>
<div class='AllScores_inputs'>
<input id="DM1_Pref_Hand" type="text" name='DM1_Pref_Hand' value="{{ DM1_PH }}">
</div>
</form>
</div>
Thank you in advance for any help or insight! ^^