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

Question

[Soolbernss]

Надо так:


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 black;
}
.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;
}

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

Comments

[Froggyweb]

а остальное тебя не смущает? Ну посмотри спецификации margin: auto в гридах - gap

[Alexey Levicky]

https://codepen.io/aleksays/pen/MWGrwpL

Вам стоит лучше подучить гриды.
`register_inner` для чего использует гриды?
Фиксированные значения для элементов формы это плохо, тем более если используете гриды.
В примере что по ссылке я использовал фиксированные значения для register_inner, но советовал бы использовать все таки %.
Если будут вопросы пишите в комментариях к ответу

Answer 1

[Ankhena]

В качестве ответа:

Объясните мне вот что:
Для register__inner вы задаете grid-template-columns: 1fr 2fr;
Внутри один дочерний элемент, у которого все свойства грид-элемента по умолчанию.
Т.е. он займет 1 колонку.
Эта колонка занимает одну треть родителя.

Как после всего написанного форма должна оказаться по центру родителя?

Все способы центрирования - выбирайте любой.
Самый простой margin-inline: auto (ну или записью по-старинке, если ТЗ не позволяет, сути не меняет)

Answer 2

[Dino Winchester]

Устанавливать фиксированные значения для свойства width - не совсем корректно. Да и к тому же вы используется гриды, не совсем так как нужно.

Немного подправил ваши стили:

.register__inner {
     width: 100%;
}

.register__form {
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
     grid-gap: 10px;
}

.register__input {
     width: 100%;
     height: 65px;
     border: 1px solid #d8d8d8;
     border-radius: 5px;
     padding: 27px 24px 23px;
}

.register__btn {
     width: 100%;
     height: 65px;
     border: none;
     border-radius: 5px;
     background: #ffe100;
}

У элемента .register__form в принципе можно установить значение grid-template-columns: repeat(2, 1fr), а потом через медиа запросы поменять, но это уже второстепенная задача.