CSS
Multi-Column Responsive Form Layout with CSS Grid for Aligned Fields
Design complex, multi-column responsive forms using CSS Grid, ensuring labels and input fields are perfectly aligned horizontally and vertically for a clean, professional user interface.
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
gap: 1.5rem 1rem; /* Row gap and column gap */
padding: 1.5rem;
max-width: 900px;
margin: 2rem auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
display: flex; /* Use flexbox within form-group for label/input alignment */
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: bold;
color: #333;
white-space: nowrap; /* Prevent label wrapping */
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
/* Example of a full-width field spanning multiple columns */
.form-group.full-width {
grid-column: 1 / -1; /* Spans from the first to the last grid line */
}
/* <!-- HTML STRUCTURE --> */
<form class="form-grid">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" placeholder="John">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" placeholder="Doe">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" placeholder="(123) 456-7890">
</div>
<div class="form-group full-width">
<label for="address">Street Address</label>
<input type="text" id="address" name="address" placeholder="123 Main St">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Anytown">
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="CA">
</div>
<div class="form-group">
<label for="zip">Zip Code</label>
<input type="text" id="zip" name="zip" placeholder="90210">
</div>
<div class="form-group full-width">
<label for="message">Your Message</label>
<textarea id="message" name="message" placeholder="Type your message here..."></textarea>
</div>
<div class="form-group full-width">
<button type="submit" style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Submit</button>
</div>
</form>
How it works: This snippet uses CSS Grid to create a responsive multi-column form layout. The `.form-grid` container uses `repeat(auto-fit, minmax(280px, 1fr))` to create flexible columns that adapt to screen size. Each `.form-group` uses `display: flex` with `flex-direction: column` to stack labels and their corresponding input fields vertically, ensuring consistent alignment. The `gap` property provides spacing between grid cells and between flex items within a group. A `.full-width` class demonstrates how to make a form field span all available columns using `grid-column: 1 / -1;`.