Input-group на гридах

Question

Подскажите пожалуйста возможно ли такое сделать на гридах? Если есть референсы буду благодарен

Разметка

<label class="string"> 
   <div class="string__prepend">
      @
    </div>
    <div class="string__append">
      @
    </div>
    <input class="string__control" type="text" value="" placeholder="Плейсхолдер"> 
    <span class="string__label">Лейбл</span>
</label>

Код из 3го примера Важно что бы string__label шел последний, но перед ним было текстовое поле. Так же важно что бы prepend и append были резиновыми

Answer 1

Немного классы поменял, для удобства.

.string {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    "label . ."
    "prepend control append";
}

.string__sym {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2.5vw;
  background-color: #BDBDBD;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.string__sym_prepend {
  grid-area: prepend;
  border-left: 1px solid black;
}

.string__sym_append {
  grid-area: append;
  border-right: 1px solid black;
}

.string__control {
  grid-area: control;
  padding: 1.5vh 1vw;
  border: none;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  outline: none;
}

<label class="string"> 
   <div class="string__sym string__sym_prepend">
      @
    </div>
    <div class="string__sym string__sym_append">
      @
    </div>
    <input class="string__control" type="text" value="" placeholder="Плейсхолдер"> 
    <span class="string__label">Лейбл</span>
</label>

БЛОГ НА HUSL

Input-group на гридах

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