Title: Custom grid layout
Last modified: August 21, 2016

---

# Custom grid layout

 *  [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * (@mak1wp)
 * [13 years ago](https://wordpress.org/support/topic/custom-grid-layout/)
 * Hi Greg,
 * Apologies to keep contacting you for support! This will be my last topic for 
   a while honest.
 * I believe the topic was touched on recently – with bootstrap, however, I’m using
   foundation CSS. I know you mentioned its not easily possible as your plugin is
   so deeply integrated with your own CSS.
 * I created a mapping function to count $cells and replace # columns where required.
 * `$mapping_array=array(0=>1, 1=>12, 2=>6, 3=>4, 4=>3, 5=>3, 6=>2);`
 * 2 columns for example to 6 – as Foundation is a 12 grid based system so 2 columns,
   or 50%50% would be ‘large-6 columns’ as the CSS class.
 *     ```
       <section id="bg<?php the_ID(); ?><?php echo $gi ?>">
       <div class="row">
       		<?php foreach ( $cells as $ci => $widgets ) {
       <div class="large-<?php echo $mapped_value;?> columns">
       ```
   
 * …. was used instead of your code to keep the site uniform to foundation CSS.
 * Note the section id – the idea behind this was to be able to style a row with
   a background colour or image.
 * Anyway, after doing all this, I realised I’ve limited myself to specific uniform
   layouts, 1/2’s 1/3’s 1/4s – no possibility of a 80%20% layout for example.
 * So I was thinking, I could use this same process, with the % that are being created
   with your code? create an array to say that 50% would be 6 for example.
 * However, I’m struggling to find how the style % are being created? I can see 
   its around here somewhere i think!
 *     ```
       f ( $cell_count > 1 ) {
       				$css_new = 'width:' . round( $cell['weight'] * 100, 0 ) . '%';
       				if ( empty( $css[1920][$css_new] ) ) $css[1920][$css_new] = array();
       				$css[1920][$css_new][] = '#pgc-' . $gi . '-' . $i;
       ```
   
 * $gi and $i are being called – $gi seems to be the row, and $i seems to be the
   columns? so its saying #pgc-1-1 width:50%; for example……. im not sure where that
   50 is coming from though.
 * Could you help me figure out a way to call the % as I did with the..
 *     ```
       <?php
       echo count($cells);
       ?>
       ```
   
 * ?
 * Many thanks in advance if you’re able to help with this Greg, apologies for the
   massively long email!
 * [http://wordpress.org/extend/plugins/siteorigin-panels/](http://wordpress.org/extend/plugins/siteorigin-panels/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * (@mak1wp)
 * [13 years ago](https://wordpress.org/support/topic/custom-grid-layout/#post-3838836)
 * Hi,
 * Please ignore the last post, I’ve nearly figured it out.
 * I’m at the point where I’m trying to apply the new mapped $css_new % directly
   to the panel grid instead of using id=”pg-<?php echo $gi ?>”
 * If you could shed any light on this you’d truly make my day as I’m not a php 
   developer and my head is about to implode!
 * Many thanks
 *  Thread Starter [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * (@mak1wp)
 * [13 years ago](https://wordpress.org/support/topic/custom-grid-layout/#post-3838837)
 * <div class=”panel-grid-cell” id=”pgc-<?php echo $gi . ‘-‘ . $ci ?>”>
 * is what i meant sorry.
 *  Thread Starter [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * (@mak1wp)
 * [13 years ago](https://wordpress.org/support/topic/custom-grid-layout/#post-3838845)
 * Hey,
 * Just thought I’d post my progress before I give up for the day.
 * I’ve attached a screenshot of where I’m at [http://cl.ly/image/011f3Q2v3B0q](http://cl.ly/image/011f3Q2v3B0q)–
   very happy to share this with you if its of interest to you.
 * I’ve reached a point where I’m thinking some kind of new function has to be created
   to echo the mapped result:
 * column 1 is given the first mapped result
    column 2, the second column 3, the
   third, and so on.
 * the first column doesn’t seem to be retrieving a result, to make this process
   that bit more difficult ha.
 * If this is of any interest to you or you have any ideas on how I can achieve 
   this and you can help I’d be extremely grateful.
 * Thanks again

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Custom grid layout’ is closed to new replies.

 * ![](https://ps.w.org/siteorigin-panels/assets/icon.svg?rev=2556869)
 * [Page Builder by SiteOrigin](https://wordpress.org/plugins/siteorigin-panels/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/siteorigin-panels/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/siteorigin-panels/)
 * [Active Topics](https://wordpress.org/support/plugin/siteorigin-panels/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/siteorigin-panels/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/siteorigin-panels/reviews/)

## Tags

 * [cells](https://wordpress.org/support/topic-tag/cells/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [grid](https://wordpress.org/support/topic-tag/grid/)
 * [layout](https://wordpress.org/support/topic-tag/layout/)

 * 3 replies
 * 1 participant
 * Last reply from: [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/custom-grid-layout/#post-3838845)
 * Status: not resolved