Grid & gutters

Fields in one, two or three columns that fold on a phone

Two columns

A wide field spans both.

First name

Last name

Address

City

ZIP code

Show the code

<div class="form-grid two w-100">
<div class="field">
<label class="label" for="gg-f">First name</label>
<div class="input">
<input id="gg-f" name="gg-f" autocomplete="given-name" type="text">
</div>
</div>
<div class="field">
<label class="label" for="gg-l">Last name</label>
<div class="input">
<input id="gg-l" name="gg-l" autocomplete="family-name" type="text">
</div>
</div>
<div class="field span-2">
<label class="label" for="gg-a">Address</label>
<div class="input">
<input id="gg-a" name="gg-a" autocomplete="street-address" type="text">
</div>
</div>
<div class="field">
<label class="label" for="gg-c">City</label>
<div class="input">
<input id="gg-c" name="gg-c" autocomplete="address-level2" type="text">
</div>
</div>
<div class="field">
<label class="label" for="gg-z">ZIP code</label>
<div class="input">
<input id="gg-z" name="gg-z" autocomplete="postal-code" type="text" inputmode="numeric">
</div>
</div>
</div>

Three columns

For short fields side by side.

Price

Cost

Tax

Show the code

<div class="form-grid three w-100">
<div class="field">
<label class="label" for="gg-p">Price</label>
<div class="input">
<span class="affix">$</span>
<input id="gg-p" name="gg-p" type="number" inputmode="decimal">
</div>
</div>
<div class="field">
<label class="label" for="gg-co">Cost</label>
<div class="input">
<span class="affix">$</span>
<input id="gg-co" name="gg-co" type="number" inputmode="decimal">
</div>
</div>
<div class="field">
<label class="label" for="gg-t">Tax</label>
<select class="input" id="gg-t" name="gg-t">
<option value="8%">8%</option>
<option value="5.5%">5.5%</option>
<option value="Exempt">Exempt</option>
</select>
</div>
</div>