Как бы ты сверстал компонент ввода текста с лейблом, подсказками и кнопкой показа пароля — с помощью Grid, Flex или обычным блоком?

Компонент ввода текста — это вертикальный стек из нескольких элементов: лейбл, контейнер с полем и кнопкой, подсказка или сообщение об ошибке. Для такой раскладки чаще всего выбирают Flexbox, потому что он решает задачу одномерного выравнивания и распределения пространства без лишней сложности.

Почему Flexbox

• Вертикальный стек: display: flex; flex-direction: column; — лейбл, поле, подсказка идут друг под другом с предсказуемыми отступами.
• Горизонтальная строка внутри поля: display: flex; на обёртке input и кнопки позволяет легко прижать кнопку к правому краю через margin-left: auto.
• Выравнивание по центру: align-items: center; выравнивает кнопку и input по вертикали без хаков.
• Адаптивность: при узком контейнере можно переключить flex-direction или разрешить перенос через flex-wrap.

Когда Grid уместен

Grid стоит брать, если компонент становится частью более сложной формы с сеткой из нескольких колонок, где нужно выравнивать лейблы и поля по общей сетке. Тогда display: grid; grid-template-columns: 120px 1fr; даёт строгое выравнивание между разными строками формы.

Пример на Flexbox

<div class="field">
  <label for="pwd">Пароль</label>
  <div class="input-row">
    <input id="pwd" type="password" />
    <button type="button" aria-label="Показать пароль">👁</button>
  </div>
  <small class="hint">Минимум 8 символов</small>
</div>

.field { display: flex; flex-direction: column; gap: 4px; }
.input-row { display: flex; align-items: center; gap: 8px; }
.input-row input { flex: 1; }
.input-row button { margin-left: auto; }

Обычные блоки без Flex/Grid тоже работают, но требуют ручных отступов, clearfix и хуже переживают изменения контента. В современной вёрстке их используют только для простейших случаев.

Итог: для типового поля ввода с лейблом и кнопкой выбирайте Flexbox — это проще, читаемее и достаточно гибко. Grid применяйте, когда компонент встраивается в общую сетку формы с выравниванием по колонкам.