Percent based grid calculator

by cvalleskey

JavaScript

let settings = {
  fullWidth : 1280,
  containerWidth : 1180,
  outerMargin : 20,
  marginWidth : 0.02,
  columnCount : 12
}

function generateColumns(columns, settings) {

  var columnsArray = [];

	if(typeof columns == "number") {
    if(columns == 1) {
      columns = [12];
    } else if(columns == 2) {
			columns = [6,6];
    } else if(columns == 3) {
			columns = [4,4,4];
    } else if(columns == 4) {
			columns = [3,3,3,3];
    } else if(columns == 6) {
			columns = [2,2,2,2,2,2];
    } else if(columns == 12) {
			columns = Array(12).fill(1);
    }
  }
  
  console.log('columns', columns);
  
  let containerFinalWidth = settings.containerWidth - settings.outerMargin*2;
  let mWidth = containerFinalWidth * settings.marginWidth;
  let cWidth = Number(((containerFinalWidth - (mWidth)*(settings.columnCount-1)) / settings.columnCount).toFixed(2));
  
  for(var i = 0; i < columns.length; i++) {

		var column = columns[i];
    
    // Add inner margin
    if(i == 0 && settings.outerMargin) {
      columnsArray.push({
        type: 'outerMargin',
        width : settings.outerMargin
      });
    }
    
    // Add margin
    if(i != 0 && settings.marginWidth) {
      columnsArray.push({
        type: 'margin',
        width : mWidth
      });
    }
    // Add column
    columnsArray.push({
      type: 'column',
      width: getColumnWidth(column, mWidth, cWidth)
    });
    
    // Add inner margin
    if(i == (columns.length-1) && settings.outerMargin) {
      columnsArray.push({
        type: 'outerMargin',
        width : settings.outerMargin
      });
    }
  }

  return columnsArray;
}

function getColumnWidth(count, mWidth, cWidth) {
	return Number((count * (mWidth-1) + count * cWidth).toFixed(2));
}

var columns = generateColumns(3, settings);

console.log('3', columns);
console.log('8,4', generateColumns([8,4], settings));
console.log('3,9', generateColumns([3,9], settings));
console.log('2,7,3', generateColumns([2,7,3], settings));