@Soolbernss

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

Надо так:
6331e7161ab65707002530.png

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


Получается следующие:
6331e7897de3b610765918.png
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
В качестве ответа:

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

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

Все способы центрирования - выбирайте любой.
Самый простой margin-inline: auto (ну или записью по-старинке, если ТЗ не позволяет, сути не меняет)
Ответ написан
Комментировать
mizutsune
@mizutsune
Simplicity is the ultimate sophistication.
Устанавливать фиксированные значения для свойства 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), а потом через медиа запросы поменять, но это уже второстепенная задача.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы