Structuring Complex Forms with CSS Grid

.form-grid {
  display: grid;
  grid-template-columns: minmax(100px, max-content) 1fr minmax(0, auto); /* Label | Input | Help Text */
  gap: 15px 20px; /* Row gap and column gap */
  align-items: center; /* Vertically center items in their grid cells */
  max-width: 700px;
  margin: 30px auto;
  padding: 25px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fcfcfc;
}

.form-grid label {
  grid-column: 1; /* Labels always in the first column */
  text-align: right;
  font-weight: bold;
  color: #333;
}

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid textarea,
.form-grid select {
  grid-column: 2; /* Inputs always in the second column */
  width: 100%; /* Ensure inputs fill their cell */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.form-grid .help-text {
  grid-column: 3; /* Help text in the third column */
  font-size: 0.85em;
  color: #666;
  font-style: italic;
}

.form-grid .full-width {
  grid-column: 1 / -1; /* Span across all columns */
}

.form-grid .full-width input,
.form-grid .full-width textarea,
.form-grid .full-width button {
    grid-column: auto; /* Reset individual item column for full-width items */
    width: 100%;
}

.form-grid button {
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 10px;
}

.form-grid button:hover {
    background-color: #0056b3;
}

<!-- HTML for context -->
<form class="form-grid">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your full name">
  <span class="help-text">Your first and last name.</span>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="[email protected]">
  <span class="help-text">We'll never share your email.</span>

  <label for="subject">Subject:</label>
  <select id="subject" name="subject">
    <option value="">Select a subject</option>
    <option value="support">Support Inquiry</option>
    <option value="feedback">Feedback</option>
    <option value="other">Other</option>
  </select>
  <span class="help-text">Choose a relevant topic.</span>

  <label for="message" class="full-width">Message:</label>
  <textarea id="message" name="message" rows="5" class="full-width" placeholder="Your message here..."></textarea>
  <span class="help-text full-width">Please be as detailed as possible.</span>

  <div class="full-width">
    <button type="submit">Submit Form</button>
  </div>
</form>