EasyGrid

EasyGrid is a simple JavaScript utility that allows you to create an in-memory grid and get the positions of each module in the grid. It can automatically calculate module sizes based on an overall width and height, or calculate the overall width and height based on the module sizes. It supports module gutters, it works in both Node.js and the browser, and it's less than 1kb minified.

Getting Started

// This line is only needed for Node.js
import EasyGrid from '@designsystemsinternational/easygrid';

const myGrid = new EasyGrid({ ... });
const myModule = myGrid.getModule(1, 1);
console.log(myModule) // -> { x:.., y:.., width:.., height:.. }

Options

• x - Number. The x position of the grid.
• y - Number. The y position of the grid.
• columns - Number. Defines the number of columns in the grid. Defaults to 10.
• columnRatio - Number[]. Defines the ratio for the columns, allowing for flexible column sizing. Defaults to uniform column widths.
• rows - Number. Defines the number of rows in the grid. Defaults to 1.
• rowRatio - Number[]. Defines the ratio for the rows, allowing for flexible row sizing. Defaults to uniform row heights.
• margin - Number or [Number, Number, Number, Number]. Defines the margin around the grid. Can be a single value for all sides or an array specifying individual margins for top, right, bottom, and left.
• gutter - Number or [Number, Number]. Defines the space between modules. Can be a single value for both width and height or an array specifying width and height separately.
• width - Number. Defines the full width of the grid, including the gutter and margin. Do not use with moduleWidth.
• height - Number. Defines the full height of the grid, including the gutter and margin. Do not use with moduleHeight.
• moduleWidth - Number. Defines the width of each module in the grid. Only applicable when width and height are not specified.
• moduleHeight - Number. Defines the height of each module in the grid. Only applicable when width and height are not specified.

Notes

• Ensure that either width and height or moduleWidth and moduleHeight are specified, but not both.
• The gutter and margin properties can be defined as single numbers for uniform spacing or as arrays for customized spacing on different sides.

This format maintains clarity and consistency with the style you provided, ensuring that users can easily understand the configuration options available for the grid. If you need further modifications or additional sections, let me know!

Usage examples

EasyGrid is very flexible, and can be created using a combination of parameters. Here's a simple grid where the module width and height are calculated automatically based on the grid width and height.

const grid = new EasyGrid({
  x: 10,
  y: 10,
  width: 500,
  height: 500,
  gutter: 10,
  columns: 10,
  rows: 2,
});

Here is the opposite example where the overall width and height of the grid is calculated based on the module width and height. The code below will create the exact same grid as the code above.

const grid = new EasyGrid({
  x: 10,
  y: 10,
  moduleWidth: 50,
  moduleHeight: 500,
  gutter: [10, 5],
  columns: 3,
  rows: 2,
});