What You'll Build

A professional contact form with multiple columns that demonstrates different layout techniques. You'll learn how to create responsive, well-organized forms using column widths and spacing.

What You'll Learn

How to create single-column layouts
How to add multiple fields to the same row
Using empty columns for spacing and organization
Using different column width units (1fr, 2fr, px, %)
Creating responsive form layouts
Best practices for form organization

📐

Layout Fundamentals

Form layout is crucial for user experience. Well-organized forms are easier to fill out and look more professional. Column widths give you precise control over how your form fields are arranged.

Experiment with different width values to see how they affect the layout!

Tutorial Steps

Step 1: One-Column Layout

Let's start with a simple one-column layout. This is the foundation for building more complex multi-column forms.

Step 2: Two-Column Layout with Empty Space

Now let's create a two-column layout where one column is empty. This demonstrates how to use addEmpty() for spacing.

💡 Tip:

The addEmpty() method creates invisible space that helps organize your form. It's perfect for creating visual separation between form sections.

Step 3: Basic Two-Column Layout

Now let's create a proper two-column layout with both columns containing fields. When you add multiple fields to the same row, they automatically share the available space equally.

💡 Tip:

By default, fields in the same row get equal width. Try resizing your browser window to see how the layout responds!

Step 4: Custom Column Widths

Now let's use custom widths. The third parameter accepts CSS Grid units like 1fr, 2fr, 100px, or 50%.

💡 Tip:

2fr means "2 fractional units" - so the email field takes twice the space of the phone field. fr units are flexible and responsive.

Step 5: Mixed Width Units

Let's combine different width units. Notice how we mix fr units with fixed px values for precise control.

💡 Tip:

Fixed widths like 100px are great for small fields like ZIP codes. fr units are perfect for flexible content like addresses. The third parameter controls the column width.

Step 6: Empty Columns for Spacing

Finally, let's add empty columns for visual spacing. addEmpty() creates invisible space that helps organize your form.

💡 Tip:

Empty columns are perfect for creating visual separation between form sections. They're especially useful for complex forms with many fields. The parameter controls the width of the empty space.

Step 7: Multi-Column Definitions for Perfect Alignment

Now let's explore the most powerful feature: multi-column definitions like '1fr 1fr'. This allows a single field to span multiple columns, creating perfect alignment across rows.

💡 Tip:

Multi-column definitions use CSS Grid syntax. '1fr 1fr' means "span two columns, each 1fr wide". This creates perfect alignment when combined with single-column fields in other rows.

Width Units Reference

1fr, 2fr, 3fr: Fractional units that share available space proportionally
100px, 200px: Fixed pixel widths (good for small, consistent fields)
50%, 25%: Percentage of container width (responsive but less flexible)
auto: Automatically size based on content (default behavior)

Try It Yourself

Challenge 1: Create a single-column form with three fields (Name, Email, Message)
Challenge 2: Add a "Country" field next to "ZIP Code" with width "1fr"
Challenge 3: Create a row with three equal-width fields using "1fr" for each
Challenge 4: Add a textarea for "Notes" that spans the full width (no width property)
Challenge 5: Experiment with percentage widths like "50%" and "25%"
Challenge 6: Create a field that spans three columns using '1fr 1fr 1fr'
Challenge 7: Try mixing multi-column definitions: one field with '2fr 1fr' and another with '1fr'
Challenge 8: Create a form with alternating rows: one field, then two fields with empty space

Next Steps

Excellent! You've mastered multi-column layouts. Ready to explore selection fields?

Continue to Subforms Tutorial

Other learning paths:

Learn about dropdown selects and checkboxes
Master form validation and conditional logic
Explore advanced input types (numbers, dates, files)
Build dynamic forms that show/hide fields