Form Layout in CSS

1. Single Column Form

A simple vertical layout, perfect for mobile devices:

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: auto;
}
label {
    font-weight: 600;
}
input, select, textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
            

2. Two-Column Layout Using Grid

Great for desktop forms with grouped fields:

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.form-grid .full-width {
    grid-column: 1 / -1;
}
            

Add a class like .full-width to span both columns for larger fields like textareas.

3. Inline Inputs & Buttons

Useful for search bars or compact login forms:

.inline-form {
    display: flex;
    gap: 10px;
    align-items: center;
}
.inline-form input {
    flex: 1;
}
            

4. Using <fieldset> and <legend>

These help group related form fields semantically and visually:

fieldset {
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 6px;
}
legend {
    font-weight: bold;
    padding: 0 10px;
}
            

5. Responsive Form Tips

• Use max-width and width: 100% to make inputs fluid.
• Switch to a single-column layout on smaller screens.
• Use gap or margins to separate fields.
• Ensure labels and inputs are clearly paired for accessibility.

Conclusion

A well-structured form layout improves usability and accessibility. With CSS Grid, Flexbox, and simple styling, you can build responsive forms that look great on all devices.