Pure CSS Grids with Multi-Column Form

Last Updated : 17 Aug, 2022

Pure CSS is a free and open-source CSS framework. It is a collection of tools for creating web applications and responsive web pages. This was developed by Yahoo and is used to make web pages that are more user-friendly, aesthetically pleasing, and quick. It is a potent replacement for Bootstrap. The creation of pure CSS took the responsive design into account. As a result, we receive responsive layouts that are prebuilt and consistent across all platforms.

Pure CSS Forms is an organized way of taking user information and inputs. We just need to add the class “pure-form” to any <form> element to make a default form. There are various types of forms like the Aligned Form, Stacked Form, and Multi-Column Form (Using Pure Grids). Multi-column forms & responsive multi-column can be created by implementing the Pure Grid and Pure Responsive Grid.

Pure CSS Grids with Multi-Column Form Classes:

pure-form: This class is used with a form element to create a Pure CSS form group.
pure-form-stacked: It is used to make the stacked form in which the labels are placed above the input fields.
pure-g: This class is used to create a Pure CSS grid system.
pure-u-m-n: This class is used to add the units of the grid system.

Syntax:

<form class="pure-form pure-form-stacked">
   <fieldset>
       <legend>Legend</legend>
       <div class="pure-g">
           <div class="pure-u-* pure-u-md-m-n">
               <label for="">...</label>
               <input type="..." id="..." 
               class="pure-u-m-n" />
           </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.

HTML

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/base-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
    <link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">
     
    <script src=
"https://purecss.io/js/ui.js">
     </script>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color:green;"> GeeksforGeeks    </h1>
            <h2>Pure CSS Grids with Multi-Column Form</h2>
        </div>
 
        <form class="pure-form pure-form-stacked"
              style="margin:3rem;">
            <fieldset>
                <legend>Submit User Details</legend>
                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-1-3">
                        <label for="multi-first-name">
                              First Name
                          </label>
                        <input type="text" id="multi-first-name"
                               class="pure-u-23-24" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <label for="multi-last-name">
                              Last Name
                          </label>
                        <input type="text" id="multi-last-name"
                               class="pure-u-23-24" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <label for="multi-email">E-Mail</label>
                        <input type="email" id="multi-email"
                               class="pure-u-23-24" required="" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <label for="multi-city">City</label>
                        <input type="text" id="multi-city"
                               class="pure-u-23-24" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3">
                        <label for="multi-state">Domain</label>
                        <select id="multi-state" class="pure-input-1-2">
                            <option>DSA</option>
                            <option>Web Technologies</option>
                            <option>Competitive Coding</option>
                        </select>
                    </div>
                </div>
                <label for="multi-terms" class="pure-checkbox">
                    <input type="checkbox" id="multi-terms" /> 
                        I've read the terms and conditions
                </label>
                <button type="submit" class=
                        "pure-button pure-button-primary">
                        Submit
                </button>
            </fieldset>
        </form>        
    </div>
</body>
</html>

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.

HTML

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
    <link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">
    <script src="https://purecss.io/js/ui.js"></script>
</head>
<body>
    <div id="main">
        <div class="header">
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h2>Pure CSS Grids with Multi-Column Form</h2>
        </div>
 
        <form class="pure-form pure-form-stacked" style="margin:3rem;">
            <fieldset>
                <legend>Submit User Details</legend>
                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
                        <label for="multi-first-name">First Name</label>
                        <input type="text" id="multi-first-name"
                               class="pure-u-23-24 pure-input-rounded" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
                        <label for="multi-last-name">Last Name</label>
                        <input type="text" id="multi-last-name"
                               class="pure-u-23-24 pure-input-rounded" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
                        <label for="multi-email">E-Mail</label>
                        <input type="email" id="multi-email"
                               class="pure-u-23-24 pure-input-rounded" required="" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
                        <label for="multi-city">City</label>
                        <input type="text" id="multi-city" class=
                                           "pure-u-23-24 pure-input-rounded" />
                    </div>
                    <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-2">
                        <label for="multi-state">Domain</label>
                        <select id="multi-state" class="pure-input-1-2">
                            <option>DSA</option>
                            <option>Web Technologies</option>
                            <option>Competitive Coding</option>
                        </select>
                    </div>
                    <fieldset class="pure-group pure-u-1 pure-u-md-1-3 pure-u-lg-4-5">
                        <input type="text" class="pure-input-1-2 pure-input-rounded"
                               placeholder="Language Preference" />
                        <input type="text" class="pure-input-1-2 pure-input-rounded"
                               placeholder="Experience" />
                        <input type="email" class="pure-input-1-2 pure-input-rounded"
                               placeholder="Score" />
                    </fieldset>
                </div>
                <label for="multi-terms" class="pure-checkbox">
                    <input type="checkbox" id="multi-terms" /> 
                           I've read the terms and conditions
                </label>
                <button type="submit" class="pure-button pure-button-primary">
                        Submit
                </button>
            </fieldset>
        </form>        
    </div>
</body>
</html>