How to detach element's height from grid's item height

Question

I am facing a small problem while designing the layout of a section of my page (using grid)...

I have 3 elements sharing the same row of the grid and none of them has it's height defined (meaning it is set to it's default "auto") since I need all of them to be as high as the contents inside them and overtime, all of this elements will consist more content so the height will need to grow along with it...

Now, the problem is that as one of the elements increases in height, it increases the height of all the elements sharing the same row, take a look at this image

You see, I've filled the table with tons of records as a way to test it and with every new row I added, the height of it's neighbors increased too and I can't figure out a way to fix it

Here is my code...

.container {
  width: 100%;
  position: absolute;
  margin: 80px 0px;
  display: grid;
  z-index: -1;
  justify-items: center;
}

.maintitle {
  font-size: 30px;
  grid-column: 2;
  grid-row: 1;
}

.title {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  display: inline-block;
  font-size: 20px;
  margin-bottom: 10px;
}

#addRole {
  background-color: rgb(241, 241, 241);
  width: 80%;
  padding: 20px;
  grid-column: 1;
  grid-row: 2;
  grid-gap: 10px;
}

#editRole {
  background-color: rgb(241, 241, 241);
  width: 80%;
  padding: 20px;
  grid-column: 3;
  grid-row: 2;
  grid-gap: 10px;
}

#roledata {
  width: 100%;
  padding: 20px;
  grid-column: 2;
  grid-row: 2;
}

#addRole input[type='text'],
#editRole input[type='text'] {
  width: 80%;
  height: 40px;
  margin: 5px 5px 5px 0px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  outline: none;
  border: 0.5px solid rgb(167, 167, 167);
}

#addRole input[type='submit'],
#editRole input[type='submit'],
#editRole input[type='number'] {
  width: 80%;
  height: 40px;
  margin: 5px 5px 5px 0px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  outline: none;
}

#addRole form hr,
#editRole form hr {
  width: 30%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.checks {
  display: inline-block;
  padding: 20px;
  text-indent: -20px;
  background-color: rgb(252, 252, 252);
  border: 1px solid rgb(238, 238, 238);
  margin: auto;
}

#checks {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin: 10px;
  display: flex-box;
  text-align: center;
}

#editchecks {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin: 10px;
  display: flex-box;
  text-align: center;
}

#addRole input[type='checkbox'],
#editRole input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0px 0px 0px 20px;
  outline: none;
  text-align: center;
}


/*Table Design (IRELLEVANT FOR THE PROBLEM/Included for increasing more height with less rows)*/

table {
  background: #f5f5f5;
  border-collapse: separate;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  width: 100%;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
}

th {
  background: linear-gradient(#777, #444);
  border-left: 1px solid #555;
  border-right: 1px solid #777;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 1px 0 #999;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  position: relative;
  text-shadow: 0 1px 0 #000;
  text-align: center;
}

th:after {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
  content: '';
  display: block;
  height: 25%;
  left: 0;
  margin: 1px 0 0 0;
  position: absolute;
  top: 25%;
  width: 100%;
}

th:first-child {
  border-left: 1px solid #777;
  box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
  box-shadow: inset -1px 1px 0 #999;
}

td {
  border-right: 1px solid #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 15px;
  position: relative;
  transition: all 300ms;
  text-align: center;
}

td:first-child {
  box-shadow: inset 1px 0 0 #fff;
}

td:last-child {
  border-right: 1px solid #e8e8e8;
  box-shadow: inset -1px 0 0 #fff;
}

tr:last-of-type td {
  box-shadow: inset 0 -1px 0 #fff;
}

tr:last-of-type td:first-child {
  box-shadow: inset 1px -1px 0 #fff;
}

tr:last-of-type td:last-child {
  box-shadow: inset -1px -1px 0 #fff;
}

tbody:hover td {
  color: transparent;
  text-shadow: 0 0 3px #aaa;
}

tbody:hover tr:hover td {
  color: #444;
  text-shadow: 0 1px 0 #fff;
}

<div class="container">
  <span class="maintitle">Roles</span>
  <div id="addRole">
    <span class="title">Add Role</span>
    <div class="result" id="result"></div>
    <form method="POST" id="addrole">
      <input type="text" id="rolename" placeholder="Role Name" />
      <input type="text" id="role_description" placeholder="Role Description" />
      <hr /><span class="title">Include Permissions</span>
      <div id="checks">
        <label class='checks'><input type='checkbox' class='selected'/>Check 1</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 2</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 3</label>
      </div>
      <input type="submit" value="Add Role" />
    </form>
  </div>

  <div id="editRole">
    <span class="title">Edit Role</span>
    <div class="result" id="updateresult"></div>
    <form method="POST" id="editrole">
      <input type="number" id="roleid" placeholder="Role ID" />
      <input type="text" id="editrolename" placeholder="Role Name" />
      <input type="text" id="editrole_description" placeholder="Role Description" />
      <hr />
      <div id="editchecks">
        <label class='checks'><input type='checkbox' class='selected'/>Check 1</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 2</label>
        <label class='checks'><input type='checkbox' class='selected'/>Check 3</label>
      </div>

      <input type="submit" value="Update Role" />
    </form>
  </div>

  <div id="roledata">
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Description</th>
        <th>Remove</th>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
      <tr>
        <td>#</td>
        <td>Admin</td>
        <td>This role does this</td>
        <td class='remove'>&times;</td>
      </tr>
    </table>
  </div>
</div>

---

Also, while we are here, do you maybe know why "Edit Role" is slightly wider than "Add Role" when the "Role ID" input is present... remove this <input type="number" id="roleid" placeholder="Role ID" /> and they share the same width...

Answer 1

By default grid items have align-items: stretch; which means grow to fit, basically like top:0; bottom:0; all it's doing is pinning the top edge of the box to the top of the parent, same for bottom with respect to the margin and

Setting align-items: flex-start; pins the item to the start of the item and nothing telling it to stretch it will end with the content.

---

Why Edit Role is slightly wider than Add Role

Two reasons.

1. You didn't explicitly specify how wide each column should be, which means it will default to auto.
2. The Content's width of the columns depend on inline level elements.

auto means the grid columns min-width equals content

---

Say each column have one Element in it,

1. The elements will be laid out.
2. The content width will be calculated
3. The left over space will be distributed evenly

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-auto-flow: column;
}

<div grid>
  <div>
    <input type="text">
  </div>
  <div>
    <input type="text">
  </div>
</div>

We end up with equal size columns.

---

Now we add one more input to the second column following the same steps.

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-auto-flow: column;
}

<div grid>
  <div col>
    <input type="text">
  </div>
  <div col>
    <input type="text">
    <input type="text">
  </div>
</div>

Because inputs are inline level elements the second input will sit next to the first one on the same line making the overall width of the content wider than the first column.

The left over space is still evenly distributed between them.

Now when there isn't enough space to fit both inputs on the same line (your case) they will wrap, However the column will not resize because it's just overflow.

---

Solution

we explicitly define width for each column.

grid-template-columns: 1fr 1fr;

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<div grid>
  <div>
    <input type="text">
  </div>
  <div>
    <input type="text">
    <input type="text">
  </div>
</div>