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

Question

Имеется 3 элемента. Необходимо второй элемент отодвинуть от первого, на одинаковое расстояние по отношению к другим. Можете подсказать как это можно более грамотно реализовать? Мое решение:

 display: grid;
 grid-template-columns: minmax(100px, 150px) 1fr auto;

Задача(Провел линию по отношению к которой должны выравниваться элементы):

Answer 1

Вроде бы, с гридами у вас нормальный вариант:

.items {
  list-style: none;
  margin: 0;
  padding: 10px;
  background-color: #ddd;
  width: 500px;
}

.item {
  display: grid;
  grid-template-columns: 20% 1fr min-content;
  gap: 10px;
  padding: 10px;
}

<ul class="items">
  <li class="item">
    <div class="item__label">Name</div>
    <div class="item__input">Igor Vensko</div>
    <div class="item__edit-button">Edit</div>
  </li>
  <li class="item">
    <div class="item__label">Email address</div>
    <div class="item__input">[email protected]</div>
    <div class="item__edit-button">Edit</div>
  </li>
</ul>

Из минусов тут, что первая колонка задана жестко и не будет подстраиваться под текст, если он будет длиннее.

Наверное, такое хорошо было бы сделать через subgrid, но это очень мало где поддерживается.

Еще можно сделать тоже через гриды и убрать обертку над внутренними элементами, тогда первая колонка будет сама менять ширину под разный текст, но семантически это некрасиво:

.items {
  list-style: none;
  margin: 0;
  padding: 10px;
  background-color: #ddd;
  width: 500px;
  display: grid;
  grid-template-columns: max-content 1fr min-content;
  gap: 10px;
}

<ul class="items">
    <div class="item__label">Name</div>
    <div class="item__input">Igor Vensko</div>
    <div class="item__edit-button">Edit</div>
    <div class="item__label">Email address</div>
    <div class="item__input">[email protected]</div>
    <div class="item__edit-button">Edit</div>
</ul>

БЛОГ НА HUSL

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

Ответы (1 шт):