/    /  Pure CSS – Multi-Columns Form

Pure CSS – Multi-Columns Form:

In this tutorial, we will learn about the Pure Multi-Columns Form. This can be created with the help of pure grid. So, in the below example we are going to use the Pure Responsive Grid to create the responsive multi-column forms. This will look alike stacked form in the mobile view.

Example: 

<html> 

<head> 

<title>Pure CSS Multi-Column form</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> 

</head> 

 <body> 

 <form class="pure-form pure-form-stacked">

    <fieldset>

        <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-3">

                <label for="first-name">First Name</label>

                <input id="first-name" class="pure-u-23-24" type="text">

            </div>



            <div class="pure-u-1 pure-u-md-1-3">

                <label for="last-name">Last Name</label>

                <input id="last-name" class="pure-u-23-24" type="text">

            </div>



            <div class="pure-u-1 pure-u-md-1-3">

                <label for="email">E-Mail</label>

                <input id="email" class="pure-u-23-24" type="email" required>

            </div>



            <div class="pure-u-1 pure-u-md-1-3">

                <label for="city">City</label>

                <input id="city" class="pure-u-23-24" type="text">

            </div>

        </div>

        <label for="terms" class="pure-checkbox">

            <input id="terms" type="checkbox"> I have read and understood the terms and conditions.

        </label>



        <button type="submit" class="pure-button pure-button-primary">Submit</button>

    </fieldset>

</form>

</body> 

</html>

Below is the output: