Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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 03:32 AM.


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