Как разместить input так как на картинке?

Question

Как это реализовать? Нужно чтобы получилось вот так: Мой код:

.request__form {
  width: 800px;
  background-color: #f5f5f5;
  padding: 30px;
}

.request {
  padding-top: 50px;
  display: grid;
  width: 100%;
  gap: 30px;
}

.request_input input,
.request_input textarea {
  width: 750px;
  outline: none;
  border: 1px solid #989898;
  border-radius: 2px;
  font-family: "Gilroy-Regular";
  color: #6d6d6d;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
}

.request_input input {
  height: 48px;
}

.request_input textarea {
  padding-top: 15px;
}

.request_input textarea:last-child {
  margin-bottom: 0;
}

.request__flex {
  width: 100%;
  text-align: center;
}

.request__policy {
  font-family: 'Gilroy-Regular';
  color: #424242;
  font-size: 12px;
}

.request__policy a {
  padding-left: 3px;
  text-decoration: underline;
  cursor: pointer;
  color: #424242;
}

.request__send {
  display: flex;
  justify-content: center;
}

.request__send button {
  border: none;
  cursor: pointer;
  outline: none;
  background-color: #182263;
  color: white;
  font-family: 'Gilroy-Medium';
  width: 250px;
  height: 58px;
  text-transform: uppercase;
  font-size: 16px;
  margin: auto;
}

p.error {
  font-family: 'Gilroy-Regular';
  color: #e21616;
  font-size: 14px;
}

<div class="request__form">

  <p class="modal_title">Заявка на консультацию</p>

  <div class="request" id="request">

    <div class="request_input">

      <input type="text" id="your_name" name="your_name" placeholder="Ваше имя">
      <p class="error">* Поле не заполнено</p>

    </div>

    <div class="request_input">

      <input type="text" id="your_number" name="your_number" placeholder="Телефон">
      <p class="error">* Поле не заполнено</p>

    </div>

    <div class="request_input">

      <input type="text" id="your_email" name="your_email" placeholder="e-mail">
      <p class="error">* Вы ввели несуществующий e-mail</p>

    </div>

    <div class="request_input">

      <textarea id="your_comment" name="your_comment" rows="6" placeholder="Коментарий..."></textarea>

    </div>

  </div>

  <div class="request__flex">

    <p class="request__policy">Нажимая кнопку «Заказать», Вы соглашаетесь с <a href="#policy">условиями обработки и хранения персональных данных</a></p>

  </div>

  <div class="request__send">

    <button>Отправить</button>

  </div>

</div>

Answer 1

У вас не сделана часть .request, которая с гридом.

Добавьте в грид две колонки: grid-template-columns: 1fr 1fr;
Первому и четвертому элементу задайте расположение с растягиванием на 2 колонки: grid-column: span 2;
Немного разберитесь с размерами, например, уберите ширину в пикселях -- сделайте через 100%.

Вот что получилось:

.request__form {
  width: 800px;
  background-color: #f5f5f5;
  padding: 30px;
}

.request {
  padding-top: 50px;
  display: grid;
  width: 100%;
  gap: 30px;
  
  grid-template-columns: 1fr 1fr;
}

.request_input:nth-of-type(1) {
  grid-column: span 2;
}

.request_input:nth-of-type(4) {
  grid-column: span 2;
}

.request_input input,
.request_input textarea {
  width: 100%;
  outline: none;
  border: 1px solid #989898;
  border-radius: 2px;
  font-family: "Gilroy-Regular";
  color: #6d6d6d;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.request_input input {
  height: 48px;
}

.request_input textarea {
  padding-top: 15px;
}

.request_input textarea:last-child {
  margin-bottom: 0;
}

.request__flex {
  width: 100%;
  text-align: center;
}

.request__policy {
  font-family: 'Gilroy-Regular';
  color: #424242;
  font-size: 12px;
}

.request__policy a {
  padding-left: 3px;
  text-decoration: underline;
  cursor: pointer;
  color: #424242;
}

.request__send {
  display: flex;
  justify-content: center;
}

.request__send button {
  border: none;
  cursor: pointer;
  outline: none;
  background-color: #182263;
  color: white;
  font-family: 'Gilroy-Medium';
  width: 250px;
  height: 58px;
  text-transform: uppercase;
  font-size: 16px;
  margin: auto;
}

p.error {
  font-family: 'Gilroy-Regular';
  color: #e21616;
  font-size: 14px;
}

<div class="request__form">

  <p class="modal_title">Заявка на консультацию</p>

  <div class="request" id="request">

    <div class="request_input">

      <input type="text" id="your_name" name="your_name" placeholder="Ваше имя">
      <p class="error">* Поле не заполнено</p>

    </div>

    <div class="request_input">

      <input type="text" id="your_number" name="your_number" placeholder="Телефон">
      <p class="error">* Поле не заполнено</p>

    </div>

    <div class="request_input">

      <input type="text" id="your_email" name="your_email" placeholder="e-mail">
      <p class="error">* Вы ввели несуществующий e-mail</p>

    </div>

    <div class="request_input">

      <textarea id="your_comment" name="your_comment" rows="6" placeholder="Коментарий..."></textarea>

    </div>

  </div>

  <div class="request__flex">

    <p class="request__policy">Нажимая кнопку «Заказать», Вы соглашаетесь с <a href="#policy">условиями обработки и хранения персональных данных</a></p>

  </div>

  <div class="request__send">

    <button>Отправить</button>

  </div>

</div>

БЛОГ НА HUSL

Как разместить input так как на картинке?

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