title: CSS Grid System for Forms (Multi-Column)
body: <p><strong>For future reference here is the final result with pixel perfect precision:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zHITr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zHITr.jpg" alt="fluid CSS form"></a>
  </p>
  
  <p>The CSS code:</p>
  
  <pre><code>._25 {
      width: 21%;
      display: inline;
      float: left;
      margin-left: 2%;
      margin-right: 2%;
  }
  ._50 {
      width: 46%;
      display: inline;
      float: left;
      margin-left: 2%;
      margin-right: 2%;
  }
  ._75 {
      width: 71%;
      display: inline;
      float: left;
      margin-left: 2%;
      margin-right: 2%;
  }
  ._100 {
      width: 96%;
      display: inline;
      float: left;
      margin-left: 2%;
      margin-right: 2%;
  }
  label {
      width: 100%;
  }
  input {
      border: 1px solid #B3B3B3;
      width: 100%;
      -moz-border-radius: 3px;
  }
  textarea {
      border: 1px solid #B3B3B3;
      width: 100%;
      -moz-border-radius: 3px;
  }
  select {
      border: 1px solid #B3B3B3;
      width: 100%;
      -moz-border-radius: 3px;
  }
  </code></pre>
  
  <p>And some sample HTML code:</p>
  
  <pre><code>&lt;div class="_50"&gt;
      &lt;p&gt;&lt;label for="in_user"&gt;Username&lt;/label&gt;&lt;input id="in_user" type="text" value=""/&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="_50"&gt;
      &lt;p&gt;&lt;label for="in_pass"&gt;Password&lt;/label&gt;&lt;input id="in_pass" type="text" value=""/&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Recently I've started using CSS grid systems and I find the whole process of designing a webpage much more simpler. Now I'm trying to stylize form elements but <strong>I'm having a really hard time making forms with columns</strong>, take the following example:</p>
  
  <ul>
  <li>div (width = 400px)
  
  <ul>
  <li>form
  
  <ul>
  <li>ul
  
  <ul>
  <li>li .half
  
  <ul>
  <li>label</li>
  <li>input (should be 200px wide)</li>
  </ul></li>
  <li>li .half
  
  <ul>
  <li>another label</li>
  <li>another input (should also be 200px wide)</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>Basically I'm applying a class that has a width attribute of 50% but putting both inputs side by side makes the row to be bigger than 100% (400px) - I guess this is because of <strong>borders, margins and paddings</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/G6yI2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G6yI2.png" alt="mockup of what I&#39;m trying to achieve"></a>
  </p>
  
  <p><strong>Is there any CSS grid system that I can use to have multi-column forms while still making all the form elements have the same size</strong> (inputs, selects and textareas); eg. 1 input in 1 column should have 400px while 2 columns should have 200px each.</p>
  
  <p><strong>EDIT: Wufoo <a href="https://examples.wufoo.com/forms/workshop-registration/" rel="nofollow noreferrer">has</a> <a href="https://examples.wufoo.com/forms/buy-a-tshirt/" rel="nofollow noreferrer">some</a> <a href="https://examples.wufoo.com/forms/mike-and-jennys-wedding-rsvp/" rel="nofollow noreferrer">examples</a> of what I'm trying to do but I'm too ignorant at CSS to understand all that code and I would appreciate if someone could give me some pointers.</strong></p>