Как выровнять форму по центру? grid

Question

Нужно так:

Мой код: HTML

<div class="register__inner">
           <form class="register__form">
            <input type="text" class="register__input" placeholder="Name">
            <input type="text" class="register__input" placeholder="Date">
            <input type="text" class="register__input" placeholder="People">
            <input type="text" class="register__input" placeholder="Email">
            <input type="text" class="register__input" placeholder="Time">
            <button class="register__btn" type="submit">FIND A TABLE</button>
        </form>
      </div>

CSS:

.register__inner{
    display: grid;
    grid-template-columns: 1fr 2fr;
    border: 1px solid red;
    
}
.register__form{
   display: grid;
   grid-template-columns: 1fr 1fr;

}
.register__input{
    width: 380px;
    height: 65px;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    padding: 27px 24px 23px;
    margin-bottom: 28px;
}
.register__btn{
    width: 380px;
    height: 65px;
    border: none;
    border-radius: 5px;
}

Получается следующие:

Answer 1

Почитайте как работает grid сетка. Не надо писать свои ширины элементам. У обертки формы вы задали две колонки, вот и ширина 100% не была. Плюс каждый input по хорошему оборачивают во wrapper и ему уже применяют стили отступов.

body {
      box-sizing: border-box;
}

.register__inner{
    display: grid;
    border: 1px solid red;
    box-sizing: border-box;
    justify-content: center;
    
}
.register__form{
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 60%;
   grid-column-gap: 12px;
    grid-row-gap: 15px;

}
.register__input{
    height: 40px;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
}
.register__btn{
    height: 40px;
    border: none;
    border-radius: 5px;
}

<div class="register__inner">
           <form class="register__form">
            <input type="text" class="register__input" placeholder="Name">
            <input type="text" class="register__input" placeholder="Date">
            <input type="text" class="register__input" placeholder="People">
            <input type="text" class="register__input" placeholder="Email">
            <input type="text" class="register__input" placeholder="Time">
            <button class="register__btn" type="submit">FIND A TABLE</button>
        </form>
      </div>

БЛОГ НА HUSL

Как выровнять форму по центру? grid

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