I am playing around with CSS grid but have ran into a road block. I'm trying to make the cells in each row automatically resize based on the size of the largest cell for that row.
I have played around with grid-auto-rows: max-content; and grid-row-height auto but have not had any luck. I'm sure someone else has already had this issue, but I can't find any other threads on here that match what's happening to me.
Desired end result: Reference the "active listening" row on the rubric. All other cells should resize to the size of the cell in the "approaching" column since the text in this cell is the most lengthy.
Any advice or help would be greatly appreciated. Thank you!!
body {
margin: 10px 25px 55px 25px
}
#title {
max-width: 1880px;
text-align: center;
font-size: 35px
}
.print {
display: none
}
select {
font-size: 35px;
appearance: none;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent
}
#grid {
padding-top: 40px;
padding-bottom: 20px;
max-width: 1880px;
margin: 0 auto;
display: grid;
grid-auto-rows: max-content;
grid-template-columns: repeat(5, 1fr);
}
.category {
font-weight: bold;
text-align: center;
padding-bottom: 10px;
font-size: 20px;
}
.tile {
height: 100%;
box-sizing: border-box;
padding: 5px 10px 5px 10px;
border-radius: 2px;
border: 1px solid black;
font-size: 0.90rem;
text-align: center
}
.tile:hover:not(.category) {
background-color: #C2CBB9;
transform: scale(1.03);
}
#grid input[type=radio] {
display: none;
}
#grid input:checked + label .tile {
background-color: #9CB47E
}
textarea {
width: 100%;
margin-bottom: 20px;
border: 1px solid black;
box-sizing: border-box;
}
@media print {
body {
margin: 10px
}
.print {
display: block
}
select {
display: none
}
h2 {
margin: 0;
text-align: center;
font-size: 20px
}
#grid {
padding-top: 10px
}
.tile {
font-size: 12px !important;
}
textarea {
display: none
}
.center {
display: none
}
}<form id='rubric' action='rubric.int.php' method='post'>
<div id='title'>
Speaking & Listening
<select name='usid' onchange='enableButton()' required>
<option value='' disabled hidden>____________</option>
<option value='1'>Sam Smith</option>
<option value='2'>John Deer</option>
</select>
<h2 class='print'>June 27th, 2021</h2>
<hr class='print'>
</div>
<div id='print'></div>
<div id='grid'>
<div class='category'></div>
<div class='category'>Beginning</div>
<div class='category'>Approaching</div>
<div class='category'>Meeting</div>
<div class='category'>Exceeding</div>
<input type='radio' id='1' disabled>
<label for='1' class='tile'>
Active Listening
<br>
<i>1.R.1.1</i>
</label>
<input type='radio' id='b_1.R.1.1' name='score[1.R.1.1]' value='1'>
<label for='b_1.R.1.1'>
<div class='tile'>
Student
<b>needs guidance</b>
and support to
<i>listen</i>
while following discussion rules.
</div>
</label>
<input type='radio' id='a_1.R.1.1' name='score[1.R.1.1]' value='2'>
<label for='a_1.R.1.1'>
<div class='tile'>
Student
<b>frequently</b>
listens and follows discussion rules and is
<b>beginning</b>
to recognize verbal and nonverbal cues.
</div>
</label>
<input type='radio' id='m_1.R.1.1' name='score[1.R.1.1]' value='3'>
<label for='m_1.R.1.1'>
<div class='tile'>
Student
<b>consistently</b>
listens and follows discussion rules
<b>AND</b>
recognizes verbal and nonverbal cues.
</div>
</label>
<input type='radio' id='e_1.R.1.1' name='score[1.R.1.1]' value='4'>
<label for='e_1.R.1.1'>
<div class='tile'>Student meeting all requirements with a degree of excellency.
</div>
</label>
<input type='radio' id='1' disabled>
<label for='1' class='tile'>
Public Speaking
<br>
<i>1.R.1.2</i>
</label>
<input type='radio' id='b_1.R.1.2' name='score[1.R.1.2]' value='1'>
<label for='b_1.R.1.2'>
<div class='tile'>
Student
<b>needs guidance and support</b>
to clearly express thoughts and ideas while the following discussion rules.
</div>
</label>
<input type='radio' id='a_1.R.1.2' name='score[1.R.1.2]' value='2'>
<label for='a_1.R.1.2'>
<div class='tile'>
Student
<b>frequently</b>
and clearly expresses thoughts and ideas while following discussion rules.
</div>
</label>
<input type='radio' id='m_1.R.1.2' name='score[1.R.1.2]' value='3'>
<label for='m_1.R.1.2'>
<div class='tile'>
Student
<b>consistently</b>
expresses thoughts and ideas while following discussion rules.
</div>
</label>
<input type='radio' id='e_1.R.1.2' name='score[1.R.1.2]' value='4'>
<label for='e_1.R.1.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency.
</div>
</label>
<input type='radio' id='1' disabled>
<label for='1' class='tile'>
Questioning
<br>
<i>1.R.2</i>
</label>
<input type='radio' id='b_1.R.2' name='score[1.R.2]' value='1'>
<label for='b_1.R.2'>
<div class='tile'>
Student
<b>needs guidance and support</b>
to ask and answer questions or gather new information to clarify information from a text, presentation, or other media.
</div>
</label>
<input type='radio' id='a_1.R.2' name='score[1.R.2]' value='2'>
<label for='a_1.R.2'>
<div class='tile'>
Student
<b>frequently</b>
asks and answers questions or gathers new information to clarify information from a text, presentation, or other media.
</div>
</label>
<input type='radio' id='m_1.R.2' name='score[1.R.2]' value='3'>
<label for='m_1.R.2'>
<div class='tile'>
Student
<b>consistently</b>
asks and answers questions or gathers new information to clarify information from a text, presentation, or other media.
</div>
</label>
<input type='radio' id='e_1.R.2' name='score[1.R.2]' value='4'>
<label for='e_1.R.2'>
<div class='tile'>Student meeting all requirements with a degree of excellency.
</div>
</label>
<input type='radio' id='1' disabled>
<label for='1' class='tile'>
Working Together
<br>
<i>1.R.3</i>
</label>
<input type='radio' id='b_1.R.3' name='score[1.R.3]' value='1'>
<label for='b_1.R.3'>
<div class='tile'>
Student
<b>needs guidance and support</b>
to participate in collaborative discussions and is
<b>beginning</b>
to build on the ideas of others.
</div>
</label>
<input type='radio' id='a_1.R.3' name='score[1.R.3]' value='2'>
<label for='a_1.R.3'>
<div class='tile'>
Student participates in collaborative discussions, and builds on the ideas of others in a
<b>limited manner</b>
.
</div>
</label>
<input type='radio' id='m_1.R.3' name='score[1.R.3]' value='3'>
<label for='m_1.R.3'>
<div class='tile'>
Student
<b>fully participates</b>
in collaborative discussions and build on the ideas of others.
</div>
</label>
<input type='radio' id='e_1.R.3' name='score[1.R.3]' value='4'>
<label for='e_1.R.3'>
<div class='tile'>Student meeting all requirements with a degree of excellency.
</div>
</label>
</div>
<input type='hidden' name='standard' value='1'>
<input type='hidden' name='ucid' value='1'>
<textarea placeholder='Add comments..' name='comment'></textarea>
<p class='print'>Comments:</p>
<div class='center'>
<button class='button grey-btn' disabled>Record Progress</button>
</div>
</form>