CSS Grid जनरेटर - विज़ुअल ग्रिड लेआउट बिल्डर ऑनलाइन

// CSS Grid Generator - JavaScript Implementation

function formatTrackSize(value, unit) {
  if (unit === 'auto') return 'auto';
  return `${value}${unit}`;
}

function generateGridCSS(options = {}) {
  const {
    display = 'grid',
    columns = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
    rows = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
    rowGap = 0,
    columnGap = 0,
    justifyItems = 'stretch',
    alignItems = 'stretch',
    justifyContent = 'start',
    alignContent = 'start',
    gridAutoFlow = 'row',
    areas = null,
  } = options;

  const rules = [`display: ${display}`];
  rules.push(`grid-template-columns: ${columns.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
  rules.push(`grid-template-rows: ${rows.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);

  if (areas && areas.length > 0) {
    const areasStr = areas.map(row => `"${row.join(' ')}"`).join('\n  ');
    rules.push(`grid-template-areas:\n  ${areasStr}`);
  }

  if (rowGap > 0 || columnGap > 0) {
    if (rowGap === columnGap) {
      rules.push(`gap: ${rowGap}px`);
    } else {
      rules.push(`gap: ${rowGap}px ${columnGap}px`);
    }
  }

  if (justifyItems !== 'stretch') rules.push(`justify-items: ${justifyItems}`);
  if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
  if (justifyContent !== 'start') rules.push(`justify-content: ${justifyContent}`);
  if (alignContent !== 'start') rules.push(`align-content: ${alignContent}`);
  if (gridAutoFlow !== 'row') rules.push(`grid-auto-flow: ${gridAutoFlow}`);

  return rules.map(r => `${r};`).join('\n');
}

// Usage
console.log(generateGridCSS({
  columns: [{ value: 1, unit: 'fr' }, { value: 2, unit: 'fr' }, { value: 1, unit: 'fr' }],
  rows: [{ value: 100, unit: 'px' }, { value: 1, unit: 'fr' }],
  rowGap: 16,
  columnGap: 16,
}));
// display: grid;
// grid-template-columns: 1fr 2fr 1fr;
// grid-template-rows: 100px 1fr;
// gap: 16px;