Как отделить высоту элемента от высоты элемента сетки

Question

У меня небольшая проблема при разработке макета раздела моей страницы (с использованием сетки) ...

У меня есть 3 элемента, совместно использующих один и тот же ряд сетки, и ни один из них не имеет высоты определено (имеется в виду, что по умолчанию установлено значение «auto»), так как мне нужно, чтобы все они были такими же высокими, как содержимое внутри них и сверхурочные, все эти элементы будут состоять из большего количества содержимого, поэтому высота должна будет расти вместе с ним. ..

Теперь проблема в том, что, когда один из элементов увеличивается по высоте, он увеличивает высоту всех элементов, разделяющих одну и ту же строку, взгляните на это изображение

Видите ли, я заполнил таблицу тоннами записей, чтобы проверить ее, и с каждой новой добавленной строкой высота ее соседей тоже увеличивалась, и я могу Не могу найти способ исправить это

Вот мой код ...

.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>

---

Также, когда мы здесь, вы, возможно, знаете, почему "Изменить роль" немного шире, чем «Добавить роль» , когда присутствует «Идентификатор роли» ... удалить это <input type="number" id="roleid" placeholder="Role ID" />, и они имеют одинаковую ширину ...

Answer 1

По умолчанию элементы сетки имеют align-items: stretch;, что означает увеличение к размеру, в основном, как top:0; bottom:0;, все, что он делает, это прикрепляет верхний край поля к верхней части родительского элемента, то же самое относится к нижнему элементу относительно поля и

Установка align-items: flex-start; прикрепляет элемент к началу элемента, и ничто не говорит ему растянуть его до конца с содержимым.

---

Почему Изменить роль немного шире, чем Добавить роль

Две причины.

1. Вы явно не указали ширину каждого столбца, что означает, что по умолчанию он будет автоматически установлен.
2. Ширина содержимого столбцов зависит от встроенных элементов уровня.

auto означает, что минимальная ширина столбцов сетки равна содержимому

---

Допустим, в каждом столбце есть один элемент,

1. Элементы будут размечены.
2. Ширина содержимого будет рассчитана
3. Оставшееся пространство будет распределяться равномерно

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>

В результате мы получим столбцы одинакового размера.

---

Теперь мы добавим еще один вход во второй столбец, выполнив те же действия.

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>

Поскольку входные данные являются встроенными элементами уровня, второй вход будет располагаться рядом с первым в той же строке, что делает общую ширину содержимого шире, чем первый столбец .

Оставшееся пространство все еще равномерно распределено между ними.

Теперь, когда недостаточно места для размещения обоих входов в одной строке ( ваш случай) они будут перенесены, однако размер столбца не изменится, потому что он просто переполнен.

---

Решение

мы явно определяем ширину для каждого столбца.

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>