Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

How to: Nested Percentage Grids


 
Prev Previous Post   Next Post Next
  #1  
Old Jan 25, 2013, 01:07 PM
jerryc
 
367 posts · Oct 2012
Florida
Layout How to: Nested Percentage Grids

Here's an example of a nested percentage grid layout. The example uses it for images, but it could be used for anything.

The rows of 6 random images at the top and bottom of the content area are laid out using the same fluid grid system that the page uses, only nested within the content area:

Code:
<div class="row">
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
</div>
A percentage based (fluid) grid layout is used, which is recommended if you nest your grids. However, instead of being a percentage of the page, the nested widths are based upon a percentage the surrounding container. The 6 equal columns used for the images in the example are 1/6th of the content area (minus margins and padding).

No special coding is required; this is how CSS handles nested percentage based layouts.

Other Grid Widths

Using the MZ 12 unit grid system, the code could easily be modified to make the rows 2, 3, 4, 6, or 12 images wide. With a little more nesting, rows of multiples of those numbers, such as 8 or 9 could also be made.

For example, to make a row 8 images wide, the grids could be nested twice, first splitting the container into halves, then splitting each half into 4ths:

HTML Code:
<div class="row">
  <div class="col6"> 
    <div class="row">
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
    </div>
  </div> 
  <div class="col6">
    <div class="row">
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
    </div>
  </div> 
</div>
Nested grids do not have to be equal widths. Just have each row add up to 12

... unless, of course, you want to intentionally use a partial grid.

Last edited by jerryc; Jan 26, 2013 at 12:17 AM.
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Byline on Category Page has a percentage sign after the year. studio435 New Versions, & Updating 2 Oct 26, 2012 12:22 PM
moving and grids? richard-hards Atahualpa 3 Wordpress theme 3 Aug 8, 2012 09:17 AM
Help editing nested comments ElectroTorials Atahualpa 3 Wordpress theme 4 Feb 7, 2011 05:50 AM
Background Colours in Nested Replies bstewart23 Comments, trackbacks & pings 0 Jan 2, 2009 05:54 AM


All times are GMT -6. The time now is 01:09 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.