Form template

Use this as a base for forms.

html

<div class="grid form-example">
  <form class="cs1 ce12 form-example--main-content">
    <div class="form-group">
      <label for="form-example-input-1">Input label</label>
      <input class="input" type="text" id="form-example-input-1" placeholder="Enter something"/>
    </div>
    <div class="form-group">
      <label for="form-example-input-3">Input label</label>
      <select class="select" id="form-example-input-3">
        <option value="1">Option one</option>
        <option value="2">Option two</option>
        <option value="3">Option three</option>
        <option value="4">Option four</option>
      </select>
    </div>
    <div class="form-group">
      <label class="checkbox">
        <input type="checkbox"/>
        <span>Select this option</span>
      </label>
    </div>

    <div class="form-group">
      <label class="radiobutton">
        <input type="radio" name="radio"/>
        <span>Option 1</span>
      </label>
      <label class="radiobutton">
        <input type="radio" name="radio"/>
        <span>Option 2</span>
      </label>
    </div>
  </form>
  <button type="button" class="cs1 ce12 button button-primary">
    Primary action
  </button>
</div>

css

.form-example {
  grid-auto-rows: 1fr auto
}
.form-example--main-content {
  align-self: flex-start
}