Tiles Layout

[columns]|[w1,h1]|[w2,h2]|[w3,h3]|...

3|1,1|2,1|

┌─────┬─────────┐
│  1  │    2    │  3 columns
└─────┴─────────┘
┌─────┬─────────┐
│  3  │    4    │  Pattern repeats
└─────┴─────────┘

4|2,2|1,1|1,1|1,1|1,1|

┌─────────┬───┬───┐
│         │ 2 │ 3 │  4 columns
│    1    ├───┼───┤
│ (Hero)  │ 4 │ 5 │
└─────────┴───┴───┘

3|1,1|1,2|1,1|

┌─────┬─────┬─────┐
│  1  │     │  3  │  3 columns
└─────┤  2  ├─────┘
┌─────┤     ├─────┐
│  4  │     │  6  │  Item 2 is 2x height
└─────┴─────┴─────┘

6|3,2|2,1|1,1|1,1|2,1|

┌─────────────┬─────────┬───┬───┐
│             │         │ 3 │ 4 │  6 columns
│      1      │    2    ├───┴───┤
│   (Large)   │         │   5   │
└─────────────┴─────────┴───────┘

// Get Tiles Layout Settings
VP.prototype.getTilesSettings = function () {
  const self = this;
  const layoutArr = self.options.tilesType.split(/[:|]/);
  
  // Remove last empty item
  if (typeof layoutArr[layoutArr.length - 1] !== 'undefined' && 
      !layoutArr[layoutArr.length - 1]) {
    layoutArr.pop();
  }
  
  return layoutArr;
};

// Set items sizes
if (settings && settings.length) {
  for (let k = 0; k < settings.length; k += 1) {
    const size = settings[k].split(',');
    const w = parseFloat(size[0]) || 1;
    const h = parseFloat(size[1]) || 1;
    
    let itemSelector = '.vp-portfolio__item-wrap';
    if (settings.length > 1) {
      itemSelector += `:nth-of-type(${settings.length}n+${k + 1})`;
    }
    
    // Apply width
    if (w && w !== 1) {
      self.addStyle(itemSelector, {
        width: `${(w * 100) / columns}%`,
      });
    }
    
    // Apply height
    self.addStyle(`${itemSelector} .vp-portfolio__item-img-wrap::before`, {
      'padding-top': `${h * 100}%`,
    });
  }
}

// Calculate responsive columns
let count = columns - 1;
let currentPoint = Math.min(screenSizes.length - 1, count);

for (; currentPoint >= 0; currentPoint -= 1) {
  if (count > 0) {
    // Reset to simpler pattern on smaller screens
    self.addStyle('.vp-portfolio__item-wrap', {
      width: `${100 / count}%`,
    }, `screen and (max-width: ${screenSizes[currentPoint]}px)`);
  }
  count -= 1;
}

[visual_portfolio 
  layout="tiles"
  tiles_type="3|1,1|"
  items_gap="15"
]

[visual_portfolio 
  layout="tiles"
  tiles_type="4|2,2|1,1|1,1|1,1|1,1|"
  items_gap="20"
]

[visual_portfolio 
  layout="tiles"
  tiles_type="3|1,1|1,2|1,1|"
  items_gap="10"
]

2|1,1|1,2|  

3|1,1|2,1|1,1|

4|2,2|1,1|1,1|1,1|1,1|

5|2,1|1,1|1,1|1,1|2,1|

6|3,2|2,1|1,1|1,1|2,1|1,1|

// Customize tiles behavior
$(document).on('initLayout.vpf', (event, self) => {
  if (self.options.layout !== 'tiles') return;
  
  const settings = self.getTilesSettings();
  // Custom pattern manipulation
});