Как я могу преобразовать эту контактную форму flexbox в сетку CSS? [closed]

Question

Я создал контактную форму с помощью flexbox. Он использует подход, ориентированный на мобильные устройства, поэтому все внутри медиа-запроса предназначено для большого экрана.

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

.form-group {
  display: flex;
  flex-flow: row wrap;
}

.col-50pct,
.col-100pct {
  flex: 0 0 100%;
  padding: 20px 15px 0;
}

label {
  display: inline-block;
  margin-bottom: .5em;
}

input,
textarea {
  border: 1px solid rgba(191, 216, 227, .8);
  border-radius: 0.3125em;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  min-height: 200px;
}

.form-control {
  display: block;
  width: 100%;
}

@media (min-width: 37.5em) {
  .col-50pct {
    flex: 0 0 50%;
  }
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://codereview.stackexchange.com/questions/259852/contact-flex.css">
  <title>Contact Form With Flexbox</title>
</head>
<body>
  <section class="contact">
    <div class="contact-container">
      <form class="contactform" action="" method="POST">

        <div class="form-group">
          <div class="col-50pct">
            <label for="form-name">Your Name</label>
            <input class="form-control" type="text" name="name" id="form-name" required>
          </div>
          <div class="col-50pct">
            <label for="form-email">Your Email Address</label>
            <input class="form-control" type="email" name="email" id="form-email" required>
          </div>
        </div> <!-- / .form-group -->

        <div class="form-group">
          <div class="col-100pct">
            <label for="form-message">Message</label>
            <textarea class="form-control" id="form-message"></textarea>
          </div>
        </div> <!-- / .form-group -->

        <div class="form-group">
          <div class="col-50pct">
            <input type="submit" name="submit" value="Send Message">
          </div>
        </div> <!-- / .form-group -->

      </form>
    </div> <!-- / .contact-container -->
  </section> <!-- / .contact -->
</body>
</html>

Я хотел бы воссоздать ту же контактную форму, но вместо этого использовать CSS Grid. Я пробовал это так, но моя структура HTML, DIV, вероятно, огромная путаница, и я либо слишком использовал их, либо неправильно использовал в Grid.

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

.grid-container {
  display: grid;
  grid-gap: 20px;
}

input,
textarea {
  border: 1px solid rgba(191, 216, 227, .8);
  border-radius: 0.3125em;
  font-size: 1.1rem;
  padding: 5px;
}

input[type="submit"] {
  width: 150px;
}

textarea {
  min-height: 200px;
}

.form-control {
  width: 100%;
}

@media (min-width: 37.5em) {
  textarea {
    grid-column-end: 2 span;
  }
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://codereview.stackexchange.com/questions/259852/contact-grid.css">
  <title>Contact Form With CSS Grid</title>
</head>
<body>
  <section class="contact">
    <div class="contact-container">
      <form class="contactform" action="" method="POST">

        <div class="grid-container">
          <div class="col-1">
            <label for="form-name">Your Name</label>
            <input class="form-control" type="text" name="name" id="form-name" required>
          </div>

          <div class="col-2">
            <label for="form-email">Your Email Address</label>
            <input class="form-control" type="email" name="email" id="form-email" required>
          </div>

          <label for="form-message">Message</label>
          <textarea class="form-control" id="form-message"></textarea>

          <input type="submit" name="submit" value="Send Message">
        </div>

      </form>
    </div> <!-- / .contact-container -->
  </section> <!-- / .contact -->
</body>
</html>

0

Похожие записи:

Добавить комментарий Отменить ответ