Databases
StackOverflow2013
Postsdbo
POhow does grid system compensate for variation in column heights?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow does grid system compensate for variation in column heights?
    text
    copied!<p>Below I am using an extraction from a 12-grid 960px system. </p> <pre><code>&lt;style&gt; body { background: gray; } #container_12 { width: 960px; margin-left: auto; margin-right: auto; background: white; overflow: hidden; } .column_1, .column_2, .column_3, .column_4, .column_5, .column_6, .column_7, .column_8, .column_9, .column_10, .column_11, .column_12 { float : left; margin-left : 10px; margin-right : 10px; margin-bottom: 10px; } .column_1 { width : 60px; } .column_2 { width : 140px; } .column_3 { width : 220px; } .column_4 { width : 300px; } .column_5 { width : 380px; } .column_6 { width : 460px; } .column_7 { width : 540px; } .column_8 { width : 620px; } .column_9 { width : 700px; } .column_10 { width : 780px; } .column_11 { width : 860px; } .column_12 { width : 940px; } &lt;/style&gt; &lt;body&gt; &lt;div id="container_12"&gt; &lt;!-- First row --&gt; &lt;div class="column_1" style="height: 400px; background: red;"&gt; &lt;/div&gt; &lt;div class="column_11" style="height: 200px; background: red;"&gt; &lt;/div&gt; &lt;!-- Second row --&gt; &lt;!-- This column overlaps into second row &lt;div class="column_1"&gt; &lt;/div&gt; --&gt; &lt;div class="column_5" style="height: 200px; background: green;"&gt; &lt;/div&gt; &lt;div class="column_3" style="height: 200px; background: green;"&gt; &lt;/div&gt; &lt;div class="column_3" style="height: 200px; background: green;"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>The output:</p> <pre><code>http://jsfiddle.net/hnDtY/ </code></pre> <p>Now let's say if I copy the two rows above to have a total of 4 rows. But I want to give the first two rows a purple background and the last two rows a white background:</p> <pre><code>http://jsfiddle.net/QZuED/ </code></pre> <p>The problem with what I did above is I had to create a new div called "row" and wrap it around the two columns. This makes it inconsistent from the rest of the layout which does not have a div "row" wrapping every row. If I added a div "row" on each row and gave it a overflow: hidden property, then it will be impossible to have one column span two rows, because it would push the items in the second row down. So how do grid systems handle this situation?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload