Form Layout with Auto-Placement

Use CSS Grid Layout to automatically arrange form elements.

You can use the implicit grid to your advantage when creating forms and any other collection of elements that require alignment in a grid-like fashion.

For example, you can use the implicit grid to do stuff like this:

Wireframe of a simple form. — Example of a simple form.

And when you add form elements to the markup, the implicit grid will add rows to accommodate them.

So we can create the above form using the following markup:

No extra markup is required in order to get things to align properly. And there's no need to add any classes to form elements. We only add one class to the form element (and even that's optional).

The layout is provided by CSS grid.

Here's a working example:

<!doctype html>
<title>Example</title>
<style>
  .myForm {
    display: grid;
    grid-template-columns: [labels] auto [controls] 1fr;
    grid-auto-flow: row;
    grid-gap: .8em;
    background: beige;
    padding: 1.2em;
  }
  .myForm > label  {
    grid-column: labels;
    grid-row: auto;
  }
  .myForm > input,
  .myForm > textarea {
    grid-column: controls;
    grid-row: auto;
  }
  .myForm > button {
    grid-column: span 2;
  }  
</style>
<form class="myForm">
  <label for="customer_name">Name </label>
  <input type="text" name="customer_name" id="customer_name" required>

  <label for="email_address">Email </label>
  <input type="email" name="email_address" id="email_address">

  <label for="comments">Comments</label>
  <textarea name="comments" id="comments" maxlength="500"></textarea>

  <button>Submit</button>

</form>

You can add new form items and they will automatically be aligned with the others, because they will be placed into the implicit grid.

This is made possible because we've made the form itself a grid (the .myForm class has display: grid applied to it). We then specified that the labels go in one column and the controls in the other.

Here's another example, this time with more form elements:

Another example of a form with auto-placed elements. — Example of a slightly more complex form with auto-placed elements.

And here's the code:

<!doctype html>
<title>Example</title>
<style>
  .myForm {
    display: grid;
    grid-template-columns: [labels] auto [controls] 1fr;
    grid-auto-flow: row;
    grid-gap: .8em;
    background: beige;
    padding: 1.2em;
  }
  .myForm > label,
  .myForm > fieldset  {
    grid-column: labels;
    grid-row: auto;
  }
  .myForm > input, 
  .myForm > select,
  .myForm > textarea {
    grid-column: controls;
    grid-row: auto;
    padding: .4em;
    border: 0;
  }
  .myForm > fieldset,
  .myForm > button {
    grid-column: span 2;
  }  
  .myForm > button {
    padding: 1em;
    background: darkkhaki;
    border: 0;
    color: white;
    }
</style>
<form class="myForm">
  <label for="customer_name">Name </label>
  <input type="text" name="customer_name" id="customer_name" required>

  <label for="phone_number">Phone </label>
  <input type="tel" name="phone_number" id="phone_number">

  <label for="email_address">Email </label>
  <input type="email" name="email_address" id="email_address">

  <fieldset>
    <legend>Which taxi do you require?</legend>
    <label> <input type="radio" name="taxi" id="taxi_car" required value="car"> Car </label>
    <label> <input type="radio" name="taxi" id="taxi_van" required value="van"> Van </label>
    <label> <input type="radio" name="taxi" id="taxi_tuk" required value="tuktuk"> Tuk Tuk </label>
  </fieldset>

  <fieldset>
    <legend>Extras</legend>
    <label> <input type="checkbox" name="extras" id="extras_baby" value="baby"> Baby Seat </label>
    <label> <input type="checkbox" name="extras" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
    <label> <input type="checkbox" name="extras" id="extras_tip" value="tip"> Stock Tip </label>
  </fieldset>

  <label for="pickup_time">Pickup Date/Time</label>
  <input type="datetime-local" name="pickup_time" id="pickup_time" required>

  <label for="pickup_place">Pickup Place</label>
  <select name="pickup_place" id="pickup_place">
    <option value="" selected="selected">Select One</option>
    <option value="office" >Taxi Office</option>
    <option value="town_hall" >Town Hall</option>
    <option value="telepathy" >We'll Guess!</option>
  </select>

  <label for="dropoff_place">Dropoff Place</label>
  <input type="text" name="dropoff_place" id="dropoff_place" required list="destinations">

  <datalist id="destinations">
    <option value="Airport">
    <option value="Beach">
    <option value="Fred Flinstone's House">
  </datalist>

  <label for="comments">Special Instructions</label>
  <textarea name="comments" id="comments" maxlength="500"></textarea>

  <button>Submit Booking</button>

</form>

Forms and Subgrids

Once subgrids have widespread browser support, it will be possible to align form elements that are not direct children of the form element (such as lists of form elements).