Multi column forms

Multi column forms can be created using the content-columns grid layout.

Start by creating a row div with the class content-columns this row is a single column full width container by default.

Add elements to this row with the class content-columns__column to contain them to the row. Elements added beyond the maximum for the row will wrap onto the next line. All elements stack below the large breakpoint.

Form elements with the class .form-item should then be placed inside these to contain them to the grid.

By adding content-columns--[two|three|four]-columns to the row div, you get two, three or four equal columns.

.content-columns--two-columns
.content-columns--three-columns
.content-columns--four-columns 
<!-- START form-multi-columns component -->
<fieldset>
    <legend>.content-columns--two-columns</legend>
    <div class="content-columns content-columns--two-columns">
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input1">.content-columns__column</label>
                <input type="text" placeholder="50%">
            </div>
        </div>
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input2">.content-columns__column</label>
                <input type="text" placeholder="50%">
            </div>
        </div>
    </div>
</fieldset>

<fieldset>
    <legend>.content-columns--three-columns</legend>
    <div class="content-columns content-columns--three-columns">
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input1">.content-columns__column</label>
                <input type="text" placeholder="33%">
            </div>
        </div>
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input2">.content-columns__column</label>
                <input type="text" placeholder="33%">
            </div>
        </div>
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input3">.content-columns__column</label>
                <input type="text" placeholder="33%">
            </div>
        </div>
    </div>
</fieldset>

<fieldset>
    <legend>.content-columns--four-columns</legend>
    <div class="content-columns content-columns--four-columns">
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input1">.content-columns__column</label>
                <input type="text" placeholder="25%">
            </div>
        </div>
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input2">.content-columns__column</label>
                <input type="text" placeholder="25%">
            </div>
        </div>
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input3">.content-columns__column</label>
                <input type="text" placeholder="25%">
            </div>
        </div>
        <div class="content-columns__column">
            <div class="form-item">
                <label for="input3">.content-columns__column</label>
                <input type="text" placeholder="25%">
            </div>
        </div>    
    </div>
</fieldset>
<!-- END form-multi-columns component -->

There are several modifiers to these base classes to achieve different layouts.

.content-columns--padding

This adds spacing around the grid elements. Can also be content-columns--horizontal-padding or content-columns--vertical-padding

Adding .content-columns--fixed-columns to the container prevents the columns collapsing at the small breakpoint.

.content-columns--fixed-columns