Grid Layout

// Custom vpRows layout mode
const VPRows = window.Isotope.LayoutMode.create('vpRows');

proto._getItemLayoutPosition = function (item) {
  item.getSize();
  
  // Calculate column span
  const remainder = item.size.outerWidth % this.columnWidth;
  const mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
  let colSpan = Math[mathMethod](item.size.outerWidth / this.columnWidth);
  
  // Position in grid
  let col = this.horizontalColIndex % this.cols;
  const isOver = colSpan > 1 && col + colSpan > this.cols;
  col = isOver ? 0 : col;
  
  return { x: this.x, y: this.y };
};

// Set column width
self.addStyle('.vp-portfolio__item-wrap', {
  width: `${100 / self.options.gridColumns}%`,
});

// Change Isotope layout mode to custom vpRows
initOptions.layoutMode = 'vpRows';

// Calculate responsive breakpoints
let count = self.options.gridColumns - 1;
let currentPoint = Math.min(screenSizes.length - 1, count);

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

// Simple 3-column grid
[visual_portfolio 
  layout="grid"
  grid_columns="3"
  items_gap="20"
]

[visual_portfolio 
  layout="grid"
  grid_columns="4"
  grid_images_aspect_ratio="1:1"
  items_gap="15"
]

[visual_portfolio 
  layout="grid"
  grid_columns="2"
  grid_images_aspect_ratio="21:9"
  items_gap="30"
]

// Hook into Grid layout initialization
$(document).on('initLayout.vpf', (event, self) => {
  if (self.options.layout !== 'grid') return;
  
  // Custom styling
  self.addStyle('.vp-portfolio__item-wrap', {
    // Your custom styles
  });
});