CSS Grid Generator

Implementation

interface GridConfig {
  columns: number;
  rows: number;
  gap: string;
  columnSizes?: string[];
  rowSizes?: string[];
}

function generateGrid(config: GridConfig): string {
  const { columns, rows, gap, columnSizes, rowSizes } = config;

  const colTemplate = columnSizes?.length
    ? columnSizes.join(' ')
    : `repeat(${columns}, 1fr)`;

  const rowTemplate = rowSizes?.length
    ? rowSizes.join(' ')
    : `repeat(${rows}, auto)`;

  return `
.grid-container {
  display: grid;
  grid-template-columns: ${colTemplate};
  grid-template-rows: ${rowTemplate};
  gap: ${gap};
}
`.trim();
}

// Usage
const css = generateGrid({
  columns: 3,
  rows: 2,
  gap: '1rem'
});

Usage

Call generateGrid() with your configuration object to get a CSS string.

Examples