Flex each item same width/height

user_16525021 0
Viewed 358

I'm working on an online rubric program, and I've tried just about everything I know without any luck. What I am trying to do is make each column in the rubric the same width and dynamically resize the height. Since there are 5 columns for each row, each column should be aprox 20% width of the parent. The tricky part comes with the height of each item. Since there will be varying text lengths inside each item, every item in the row should resize to the height of the longest item from that row.

I'm using flex right now, and I've tried using flex: 1 1 0px and flex-grow: 1; inside the .tile without luck. I have also tried using CSS grid, where I am able to achieve the equal width, but then the height requirement gets all wonky.

For visual people, the end result should look like this.

Any advice is appreciated.

.print {display: none}
body {margin: 0}

#title {
  max-width: 1880px;
  text-align: center;
  font-size: 35px}
  #title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent}


/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
  box-sizing: border-box;}

section {display: flex;}

.tile {
  flex: 1 1 0px;
  box-sizing: border-box;
  padding: 5px 10px 20px 10px;
  border-radius: 2px;
  border: 1px solid black;
  font-size: 0.90rem;
  text-align: center}

#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
  <div id='title'>
      Research & Inquiry 
      <select name='usid' onchange='enableButton()' required>
          <option value='' disabled hidden>____________</option>
          <option value='11'>John Doe</option>
      </select>
      <h2 class='print'>August 8th, 2021</h2>
      <hr class='print'>
  </div>
  
  <div id='rubric'>
    <section>
      <div class='category'></div>
      <div class='category'>Beginning</div>
      <div class='category'>Approaching</div>
      <div class='category'>Meeting</div>
      <div class='category'>Exceeding</div>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Inquiry<br><i>6.R.1</i></div>
      </label>
      <input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
      <label for='b_6.R.1'>
          <div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
      </label>
      <input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
      <label for='a_6.R.1'>
          <div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
      </label>
      <input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
      <label for='m_6.R.1'>
          <div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
      </label>
      <input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
      <label for='e_6.R.1'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Recording Info<br><i>6.R.2</i></div>
      </label>
      <input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
      <label for='b_6.R.2'>
          <div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
      </label>
      <input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
      <label for='a_6.R.2'>
          <div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
      </label>
      <input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
      <label for='m_6.R.2'>
          <div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
      </label>
      <input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
      <label for='e_6.R.2'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Reliability<br><i>6.R.3</i></div>
      </label>
      <input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
      <label for='b_6.R.3'>
          <div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
      </label>
      <input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
      <label for='a_6.R.3'>
          <div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher.  </div>
      </label>
      <input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
      <label for='m_6.R.3'>
          <div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
      </label>
      <input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
      <label for='e_6.R.3'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <input type='hidden' name='standard' value='4'>
    <input type='hidden' name='ucid' value='1'>
    <textarea placeholder='Add comments..' name='comment'></textarea>
    <p class='print'>Comments:</p>
  </div>
    
  <div id='controls' class='center'>
      <button class='button grey-btn' disabled>Record Progress</button>
  </div>
  
</form>

flexbox css
2 Answers

I think this is the perfect use-case for CSS Grid. I would recommend making the <section> a grid and using something like repeat(5, 20%) or explicitly use 20% 20% 20% 20% 20% for your grid-template-columns definition. You might also use a combination of repeat() and minmax() for column generation when building out responsive grids.

Lastly, just make sure to give each .tile a height of 100% so they occupy all of the vertical space in each grid item.

.print {display: none}
body {margin: 0}

#title {
  max-width: 1880px;
  text-align: center;
  font-size: 35px}
  #title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent}


/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
  box-sizing: border-box;}

section {
  display: grid;
  /* grid-template-columns: 20% 20% 20% 20% 20%; */
  grid-template-columns: repeat(5, 20%);
  gap: 0;
}

.tile {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  padding: 5px 10px 20px 10px;
  border-radius: 2px;
  border: 1px solid black;
  font-size: 0.90rem;
  text-align: center}
  

#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
  <div id='title'>
      Research & Inquiry 
      <select name='usid' onchange='enableButton()' required>
          <option value='' disabled hidden>____________</option>
          <option value='11'>John Doe</option>
      </select>
      <h2 class='print'>August 8th, 2021</h2>
      <hr class='print'>
  </div>
  
  <div id='rubric'>
    <section>
      <div class='category'></div>
      <div class='category'>Beginning</div>
      <div class='category'>Approaching</div>
      <div class='category'>Meeting</div>
      <div class='category'>Exceeding</div>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Inquiry<br><i>6.R.1</i></div>
      </label>
      <input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
      <label for='b_6.R.1'>
          <div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
      </label>
      <input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
      <label for='a_6.R.1'>
          <div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
      </label>
      <input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
      <label for='m_6.R.1'>
          <div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
      </label>
      <input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
      <label for='e_6.R.1'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Recording Info<br><i>6.R.2</i></div>
      </label>
      <input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
      <label for='b_6.R.2'>
          <div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
      </label>
      <input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
      <label for='a_6.R.2'>
          <div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
      </label>
      <input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
      <label for='m_6.R.2'>
          <div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
      </label>
      <input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
      <label for='e_6.R.2'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Reliability<br><i>6.R.3</i></div>
      </label>
      <input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
      <label for='b_6.R.3'>
          <div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
      </label>
      <input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
      <label for='a_6.R.3'>
          <div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher.  </div>
      </label>
      <input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
      <label for='m_6.R.3'>
          <div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
      </label>
      <input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
      <label for='e_6.R.3'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <input type='hidden' name='standard' value='4'>
    <input type='hidden' name='ucid' value='1'>
    <textarea placeholder='Add comments..' name='comment'></textarea>
    <p class='print'>Comments:</p>
  </div>
    
  <div id='controls' class='center'>
      <button class='button grey-btn' disabled>Record Progress</button>
  </div>
  
</form>

Edit: Your source from pastebin was missing a closing </html> tag.

<body>
    <title>Presentations Rubric</title>
    <link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
    <form id='rubric' action='rubric.int.php' method='post'>
        <div id='title'>
            Presentations 
            <select name='usid' onchange='enableButton()' required>
                <option value='' disabled hidden>____________</option>
                <option value='11'>John Doe</option>
            </select>
            <h2 class='print'>August 8th, 2021</h2>
            <hr class='print'>
        </div>
        <div id='rubric'>
            <section>
                <div class='category'></div>
                <div class='category'>Beginning</div>
                <div class='category'>Approaching</div>
                <div class='category'>Meeting</div>
                <div class='category'>Exceeding</div>
            </section>
            <section>
                <input type='radio' id='5' disabled>
                <label for='5'>
                    <div class='tile'>
                        Using Technology
                        <br>
                        <i>7.W.1</i>
                    </div>
                </label>
                <input type='radio' id='b_7.W.1' name='score[7.W.1]' value='1'>
                <label for='b_7.W.1'>
                    <div class='tile'>
                        Student 
                        <b>needs guidance and support</b>
                         to create multimodal content that effectively communicates an idea using appropriate technology and media.
                    </div>
                </label>
                <input type='radio' id='a_7.W.1' name='score[7.W.1]' value='2'>
                <label for='a_7.W.1'>
                    <div class='tile'>
                        Student 
                        <b>attempts</b>
                         to create multimodal content that effectively communicates an idea using appropriate technology and media.
                    </div>
                </label>
                <input type='radio' id='m_7.W.1' name='score[7.W.1]' value='3'>
                <label for='m_7.W.1'>
                    <div class='tile'>Student will create multimodal content that effectively communicates an idea using appropriate technology and media.</div>
                </label>
                <input type='radio' id='e_7.W.1' name='score[7.W.1]' value='4'>
                <label for='e_7.W.1'>
                    <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
                </label>
            </section>
            <section>
                <input type='radio' id='5' disabled>
                <label for='5'>
                    <div class='tile'>
                        Presentation Creation
                        <br>
                        <i>7.W.2</i>
                    </div>
                </label>
                <input type='radio' id='b_7.W.2' name='score[7.W.2]' value='1'>
                <label for='b_7.W.2'>
                    <div class='tile'>
                        Student 
                        <b>needs guidance and support</b>
                         to create presentations that integrate visual displays and other multimedia to enrich the presentation. 
                    </div>
                </label>
                <input type='radio' id='a_7.W.2' name='score[7.W.2]' value='2'>
                <label for='a_7.W.2'>
                    <div class='tile'>
                        Student 
                        <b>attempts</b>
                         to create presentations that integrate visual displays and other multimedia to enrich the presentation.
                    </div>
                </label>
                <input type='radio' id='m_7.W.2' name='score[7.W.2]' value='3'>
                <label for='m_7.W.2'>
                    <div class='tile'>Student will create presentations that integrate visual displays and other multimedia to enrich the presentation. 
                    </div>
                </label>
                <input type='radio' id='e_7.W.2' name='score[7.W.2]' value='4'>
                <label for='e_7.W.2'>
                    <div class='tile'>Student meeting all requirements with a degree of excellency. 
                    </div>
                </label>
            </section>
            <section>
                <input type='radio' id='5' disabled>
                <label for='5'>
                    <div class='tile'>
                        Presentation Skills
                        <br>
                        <i>1.W.1</i>
                    </div>
                </label>
                <input type='radio' id='b_1.W.1' name='score[1.W.1]' value='1'>
                <label for='b_1.W.1'>
                    <div class='tile'>
                        Student attempts to give 
                        <b>simple</b>
                         presentations in a group or individually, organizing information and determining appropriate content for audience with 
                        <b>full guidance and support</b>
                        .
                    </div>
                </label>
                <input type='radio' id='a_1.W.1' name='score[1.W.1]' value='2'>
                <label for='a_1.W.1'>
                    <div class='tile'>
                        Student gives presentations in a group or individually, organizing information and determining appropriate content for audience with 
                        <b>some guidance and support</b>
                        . 
                    </div>
                </label>
                <input type='radio' id='m_1.W.1' name='score[1.W.1]' value='3'>
                <label for='m_1.W.1'>
                    <div class='tile'>Student give presentations in a group or individually, organizing information and determining appropriate content for audience.</div>
                </label>
                <input type='radio' id='e_1.W.1' name='score[1.W.1]' value='4'>
                <label for='e_1.W.1'>
                    <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
                </label>
            </section>
            <input type='hidden' name='standard' value='5'>
            <input type='hidden' name='ucid' value='1'>
            <textarea placeholder='Add comments..' name='comment'></textarea>
            <p class='print'>Comments:</p>
        </div>
        <div id='controls'>
            <button class='button grey-btn' disabled>Record Progress</button>
        </div>
    </form>
</body>
</html>
 
<style>
.print {
    display: none
}
 
body {
    margin: 0
}
 
#title {
    padding: 20px 0px;
    text-align: center;
    font-size: 35px
}
 
#title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent
}
/* --------[RUBRIC]-------- */
 
#rubric {
    margin: 10px 25px 0px 25px;
}
 
#rubric textarea {
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
}
 
section {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    gap: 0;
}
 
.tile {
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 5px 10px 20px 10px;
    border-radius: 2px;
    border: 1px solid black;
    font-size: 0.90rem;
    text-align: center
}
 
.tile:hover:not(.category) {
    background-color: #D4BBF1;
    transform: scale(1.03);
}
 
.category {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}
 
section input[type=radio] {
    display: none
}
 
section input:checked + label .tile {
    background-color: #B488E7
}
 
#controls {
    margin-top: 20px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
}
/* --------[PRINT]-------- */
 
.print {
    display: none
}
 
@media print {
    body {
        margin: 10px
    }
 
    .print {
        display: block
    }
 
    select {
        display: none
    }
 
    h2 {
        margin: 0;
        text-align: center;
        font-size: 20px
    }
 
    .category {
        padding-top: 50px;
    }
 
    .tile {
        font-size: 12px !important;
    }
 
    textarea {
        display: none
    }
 
    .center {
        display: none
    }
}
</style>

user_113895810

All you have to do is to give display:flex for the same height, flex-direction: column to be neat, and flex: 1 1 0px so that they are the same width (20% of the screen) to each child of the section (using section * to select all children of the section).

.print {display: none}
body {margin: 0}

#title {
  max-width: 1880px;
  text-align: center;
  font-size: 35px}
  #title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent}


/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
  box-sizing: border-box;}

section {display: flex;}

section * {
    display:flex;
    flex-direction: column;
    flex: 1 1 0px;
}

.tile {
  flex: 1 1 0px;
  box-sizing: border-box;
  padding: 5px 10px 20px 10px;
  border-radius: 2px;
  border: 1px solid black;
  font-size: 0.90rem;
  text-align: center}

#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
  <div id='title'>
      Research & Inquiry 
      <select name='usid' onchange='enableButton()' required>
          <option value='' disabled hidden>____________</option>
          <option value='11'>John Doe</option>
      </select>
      <h2 class='print'>August 8th, 2021</h2>
      <hr class='print'>
  </div>
  
  <div id='rubric'>
    <section>
      <div class='category'></div>
      <div class='category'>Beginning</div>
      <div class='category'>Approaching</div>
      <div class='category'>Meeting</div>
      <div class='category'>Exceeding</div>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Inquiry<br><i>6.R.1</i></div>
      </label>
      <input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
      <label for='b_6.R.1'>
          <div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
      </label>
      <input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
      <label for='a_6.R.1'>
          <div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
      </label>
      <input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
      <label for='m_6.R.1'>
          <div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
      </label>
      <input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
      <label for='e_6.R.1'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Recording Info<br><i>6.R.2</i></div>
      </label>
      <input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
      <label for='b_6.R.2'>
          <div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
      </label>
      <input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
      <label for='a_6.R.2'>
          <div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
      </label>
      <input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
      <label for='m_6.R.2'>
          <div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
      </label>
      <input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
      <label for='e_6.R.2'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <input type='hidden' name='standard' value='4'>
    <input type='hidden' name='ucid' value='1'>
    <textarea placeholder='Add comments..' name='comment'></textarea>
    <p class='print'>Comments:</p>
  </div>
    
  <div id='controls' class='center'>
      <button class='button grey-btn' disabled>Record Progress</button>
  </div>
  
</form>

user_86986710
Related