Pure CSS Grids with Multi-Column Form

Pure CSS is a lightweight and responsive CSS framework developed by Yahoo. It helps in creating structured and responsive forms using classes like <form> and Pure Grid.

• Supports different form layouts such as Aligned Form and Stacked Form
• Uses the <form> element with the pure-form class to create styled forms
• Pure Grid is used to create responsive multi-column form layouts

Syntax:

<form class="pure-form pure-form-stacked">
 <fieldset>
 <legend>Legend</legend>

 <div class="pure-g">

 <div class="pure-u-1 pure-u-md-1-2">
 <label for="name">Name</label>
 <input type="text" id="name" 
 class="pure-u-1" />
 </div>

 </div>
 </fieldset>
</form>

Example 1: This code example demonstrates how we can make a multi-form column that is responsive with the help of Pure Responsive Grids.

Output:

Example 2: The code example demonstrates how we can add all types of form inputs like the grouped ones or the rounded ones to the multi-column layout. 

Output: