title: CSS grid layout equal to WPF grid
body: <p>I'm generating a WPF grids within my window on runtime which look for example like this:</p>
  
  <pre><code>      &lt;Grid Height="500"  Width="1000" ShowGridLines="True"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="1*"&gt;&lt;/ColumnDefinition&gt;
                      &lt;ColumnDefinition Width="2*"&gt;&lt;/ColumnDefinition&gt;
                      &lt;ColumnDefinition Width="1*"&gt;&lt;/ColumnDefinition&gt;
                      &lt;ColumnDefinition Width="1*"&gt;&lt;/ColumnDefinition&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
                      &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
                  &lt;/Grid.RowDefinitions&gt;
              &lt;/Grid&gt;
  </code></pre>
  
  <p>So the first, third and fourth column will have half the width of the second column.</p>
  
  <p>What I want to do is generate a css layout in a ASP.NET Webforms application which has the same layout, preferabely optimized for smartphones and tablets aswell.
  I usually work with bootstap, which offers a very effective way of generating layouts. For example:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-1"&gt;col&lt;/div&gt;
    &lt;div class="col-2"&gt;col&lt;/div&gt;
    &lt;div class="col-1"&gt;col&lt;/div&gt;
    &lt;div class="col-1"&gt;col&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately in this example there there is no way to do this , since the bootstrap layout has a 12 column grid and as seen in the example above the width will never be filled since the column with is bound to the grid layout. How to achieve this? Does not matter if other libraries are required.</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>The number of columns may vary, and there may be multiple grids with different number of columns on one single page. Furthermore the widths 1*,2*,1*,1* is just an example. It might as well be something like 5*,2*,2*,1*,1* ( first column 5 times the width of the last two and column 2 and 3 double the width of the last two )</p>