@egjs/grid/src/grids/MasonryGrid.ts

A component that can arrange items according to the type of grids

/**
 * egjs-grid
 * Copyright (c) 2021-present NAVER Corp.
 * MIT license
 */
import Grid from "../Grid";
import { PROPERTY_TYPE, UPDATE_STATE } from "../consts";
import { GridOptions, Properties, GridOutlines, GridAlign, MasonryGridVerticalAlign } from "../types";
import { range, GetterSetter, between, isString, throttle } from "../utils";
import { GridItem } from "../GridItem";


function getColumnPoint(
  outline: number[],
  columnIndex: number,
  columnCount: number,
  pointCaculationName: "max" | "min",
) {
  return Math[pointCaculationName](...outline.slice(columnIndex, columnIndex + columnCount));
}

function getColumnIndex(
  outline: number[],
  columnCount: number,
  nearestCalculationName: "max" | "min",
  startPos: number,
) {
  const length = outline.length - columnCount + 1;
  const pointCaculationName = nearestCalculationName === "max" ? "min" : "max";
  const indexCaculationName = nearestCalculationName === "max" ? "lastIndexOf" : "indexOf";
  const points = range(length).map((index) => {
    const point = getColumnPoint(outline, index, columnCount, pointCaculationName);

    return Math[pointCaculationName](startPos, point);
  });

  return points[indexCaculationName](Math[nearestCalculationName](...points));
}

/**
 * @typedef
 * @memberof Grid.MasonryGrid
 * @extends Grid.GridOptions
 */
export interface MasonryGridOptions extends GridOptions {
  /**
   * The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container. Can be used instead of outlineLength.
   * <ko>열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.</ko>
   * @default 0
   */
  column?: number;
  /**
   * The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
   * <ko>열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.</ko>
   * @default 0
   */
  columnSize?: number;
  /**
   * The size ratio(inlineSize / contentSize) of the columns. 0 is not set. `true` is automatically calculated as orgInlineSize / orgContentSize.
   * <ko>열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다. `true` 는 orgInlineSize / orgContentSize로 자동 계산이 된다.</ko>
   * @default 0
   */
  columnSizeRatio?: number | boolean;
  /**
   * Align of the position of the items. If you want to use `stretch`, be sure to set `column`, `columnSize` or `maxStretchColumnSize` option. ("start", "center", "end", "justify", "stretch")
   * <ko>아이템들의 위치의 정렬. `stretch`를 사용하고 싶다면 `column`, `columnSize` 또는 `maxStretchColumnSize` 옵션을 설정해라.  ("start", "center", "end", "justify", "stretch")</ko>
   * @default "justify"
   */
  align?: GridAlign;
  /**
   * Content direction alignment of items. “Masonry” is sorted in the form of masonry. Others are applied as content direction alignment, similar to vertical-align of inline-block.
   * If you set multiple columns (`data-grid-column`), the screen may look strange.
   * <ko>아이템들의 Content 방향의 정렬. "masonry"는 masonry 형태로 정렬이 된다. 그 외는 inline-block의 vertical-align과 유사하게 content 방향 정렬로 적용이 된다.칼럼(`data-grid-column` )을 여러개 설정하면 화면이 이상하게 보일 수 있다. </ko>
   * @default "masonry"
   */
  contentAlign?: MasonryGridVerticalAlign;
  /**
   * Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate.
   * <ko>칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다.</ko>
   * @default 1
   */
  columnCalculationThreshold?: number;
  /**
   * If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
   * <ko>stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.</ko>
   * @default Infinity
   */
  maxStretchColumnSize?: number;

  /**
   * Adjust the contentSize of the items to make the outlines equal.
   * "scale-down": Scales down to fit the start of the item's outline.
   * "scale-center": Scales down or up to fit the center of the item's outline.
   * "scale-up": Scales up to fit the end of the item's outline.
   * <ko>아이템들의 contentSize를 조절하여 outline을 동등하게 한다.
   * "scale-down": 아이템들의 아웃라인 시작 부분에 맞춰 축소시킨다.
   * "scale-center": 아이템들의 아웃라인 중간 부분에 맞춰 축소시키거나 확장시킨다.
   * "scale-up": 아이템들의 아웃라인 끝 부분에 맞춰 확장시킨다.</ko>
   * @default ""
   */
  stretchOutline?: "scale-down" | "scale-up" | "scale-center" | "";
  /**
   * When using stretchOutline, the contentSize of the items is adjusted to adjust the outline to a value between min and max. ([minSize, maxSize])
   * <ko>stretchOutline를 사용하는 경우 아이템들의 contentSize를 조절하여 container의 outline을 min과 max 사이 값으로 조절한다. ([minSize, maxSize])</ko>
   * @default [0, Infinity]
   */
  stretchContainerSize?: number[];
  /**
   * adjust the minimum and maximum item size of the items. ([minSize, maxSize])
   * <ko>아이템들의 item size 최소, 최대 크기를 조절한다. ([minSize, maxSize])</ko>
   * @default [0, Infinity]
   */
  stretchItemSize?: Array<string | number>;
}

/**
 * MasonryGrid is a grid that stacks items with the same width as a stack of bricks. Adjust the width of all images to the same size, find the lowest height column, and insert a new item.
 * @ko MasonryGrid는 벽돌을 쌓아 올린 모양처럼 동일한 너비를 가진 아이템를 쌓는 레이아웃이다. 모든 이미지의 너비를 동일한 크기로 조정하고, 가장 높이가 낮은 열을 찾아 새로운 이미지를 삽입한다. 따라서 배치된 아이템 사이에 빈 공간이 생기지는 않지만 배치된 레이아웃의 아래쪽은 울퉁불퉁해진다.
 * @memberof Grid
 * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
 * @param {Grid.MasonryGrid.MasonryGridOptions} options - The option object of the MasonryGrid module <ko>MasonryGrid 모듈의 옵션 객체</ko>
 */
@GetterSetter
export class MasonryGrid extends Grid<MasonryGridOptions> {
  public static propertyTypes = {
    ...Grid.propertyTypes,
    column: PROPERTY_TYPE.RENDER_PROPERTY,
    columnSize: PROPERTY_TYPE.RENDER_PROPERTY,
    columnSizeRatio: PROPERTY_TYPE.RENDER_PROPERTY,
    align: PROPERTY_TYPE.RENDER_PROPERTY,
    columnCalculationThreshold: PROPERTY_TYPE.RENDER_PROPERTY,
    maxStretchColumnSize: PROPERTY_TYPE.RENDER_PROPERTY,
    contentAlign: PROPERTY_TYPE.RENDER_PROPERTY,
    stretchOutline: PROPERTY_TYPE.RENDER_PROPERTY,
    stretchContainerSize: PROPERTY_TYPE.RENDER_PROPERTY,
    stretchItemSize: PROPERTY_TYPE.RENDER_PROPERTY,
  };
  public static defaultOptions: Required<MasonryGridOptions> = {
    ...Grid.defaultOptions,
    align: "justify",
    column: 0,
    columnSize: 0,
    columnSizeRatio: 0,
    columnCalculationThreshold: 0.5,
    maxStretchColumnSize: Infinity,
    contentAlign: "masonry",
    stretchOutline: "",
    stretchContainerSize: [0, Infinity],
    stretchItemSize: [0, Infinity],
  };

  public applyGrid(items: GridItem[], direction: "start" | "end", outline: number[]): GridOutlines {
    items.forEach((item) => {
      item.isRestoreOrgCSSText = false;
    });
    const columnSize = this.getComputedOutlineSize(items);
    const column = this.getComputedOutlineLength(items);

    // contentPos를 변경했는지에 따라 computedSize로 설정해야 함.
    let useComputedSize = false;
    const {
      align,
      observeChildren,
      columnSizeRatio,
      contentAlign,
      stretchOutline,
      stretchContainerSize,
      stretchItemSize,
    } = this.options;
    const inlineGap = this.getInlineGap();
    const contentGap = this.getContentGap();
    const outlineLength = outline.length;
    const itemsLength = items.length;
    const alignPoses = this._getAlignPoses(column, columnSize);
    const isEndDirection = direction === "end";
    const nearestCalculationName = isEndDirection ? "min" : "max";
    const pointCalculationName = isEndDirection ? "max" : "min";

    let startOutline = [0];

    if (outlineLength === column) {
      startOutline = outline.slice();
    } else {
      const point = outlineLength ? Math[pointCalculationName](...outline) : 0;

      startOutline = range(column).map(() => point);
    }
    let endOutline = startOutline.slice();
    const columnDist = column > 1 ? alignPoses[1] - alignPoses[0] : 0;
    const isStretch = align === "stretch";
    const isStartContentAlign = isEndDirection && contentAlign === "start";
    const itemIndexes: number[][] = range(startOutline.length).map(() => []);



    let startPos = isEndDirection ? -Infinity : Infinity;


    if (isStartContentAlign) {
      // support only end direction
      startPos = Math.min(...endOutline);
    }


    for (let i = 0; i < itemsLength; ++i) {
      const itemIndex = isEndDirection ? i : itemsLength - 1 - i;
      const item = items[itemIndex];
      const columnAttribute = parseInt(item.attributes.column || "1", 10);
      const maxColumnAttribute = parseInt(item.attributes.maxColumn || "1", 10);
      let contentSize = item.contentSize;
      let columnCount = Math.min(
        column,
        columnAttribute || Math.max(1, Math.ceil((item.inlineSize + inlineGap) / columnDist)),
      );
      const maxColumnCount = Math.min(column, Math.max(columnCount, maxColumnAttribute));
      let columnIndex = getColumnIndex(endOutline, columnCount, nearestCalculationName, startPos);
      let contentPos = getColumnPoint(endOutline, columnIndex, columnCount, pointCalculationName);

      if (isStartContentAlign && startPos !== contentPos) {
        startPos = Math.max(...endOutline);
        endOutline = endOutline.map(() => startPos);
        contentPos = startPos;
        columnIndex = 0;
      }

      while (columnCount < maxColumnCount) {
        const nextEndColumnIndex = columnIndex + columnCount;
        const nextColumnIndex = columnIndex - 1;

        if (isEndDirection && (nextEndColumnIndex >= column || endOutline[nextEndColumnIndex] > contentPos)) {
          break;
        }
        if (!isEndDirection && (nextColumnIndex < 0 || endOutline[nextColumnIndex] < contentPos)) {
          break;
        }
        if (!isEndDirection) {
          --columnIndex;
        }
        ++columnCount;
      }

      columnIndex = Math.max(0, columnIndex);
      columnCount = Math.min(column - columnIndex, columnCount);

      itemIndexes[columnIndex].push(itemIndex);

      // stretch mode or data-grid-column > "1"
      if ((columnAttribute > 0 && columnCount > 1) || isStretch) {
        const nextInlineSize = (columnCount - 1) * columnDist + columnSize;

        if ((!this._isObserverEnabled() || !observeChildren) && item.cssInlineSize !== nextInlineSize) {
          item.shouldReupdate = true;
        }
        item.cssInlineSize = nextInlineSize;
      }
      if (columnSizeRatio === true) {
        const ratio = item.orgContentSize / item.orgInlineSize;

        contentSize = item.computedInlineSize * ratio;
        item.cssContentSize = contentSize;
        useComputedSize = true;
      } else if (columnSizeRatio && columnSizeRatio > 0) {
        contentSize = item.computedInlineSize / columnSizeRatio;
        item.cssContentSize = contentSize;
        useComputedSize = true;
      }
      // 배치가 조금 더 수월하기 위해서는 min, max scaling 1차 작업
      let minStretchSize = 0;
      let maxStretchSize = Infinity;
      let useStretchItemSize = false;

      if (isString(stretchItemSize[0])) {
        const [inline, content] = stretchItemSize[0].split(":").map((value) => parseFloat(value));

        minStretchSize = item.computedInlineSize * content / inline;
        useStretchItemSize = true;
      } else if (stretchItemSize[0]) {
        minStretchSize = stretchItemSize[0];
        useStretchItemSize = true;
      }
      if (isString(stretchItemSize[1])) {
        const [inline, content] = stretchItemSize[1].split(":").map((value) => parseFloat(value));

        maxStretchSize = item.computedInlineSize * content / inline;
        useStretchItemSize = true;
      } else if (stretchItemSize[1] && isFinite(stretchItemSize[1])) {
        // 유한한 숫자라면 stretch 대상으로 판단
        maxStretchSize = stretchItemSize[1];
        useStretchItemSize = true;
      }
      const nextContentSize = between(contentSize, minStretchSize, maxStretchSize);


      // stretchItemSize를 사용한 케이스라면 반영
      if (useStretchItemSize) {
        contentSize = nextContentSize;
        item.cssContentSize = contentSize;
        useComputedSize = true;
      }
      const inlinePos = alignPoses[columnIndex];
      contentPos = isEndDirection ? contentPos : contentPos - contentGap - contentSize;

      item.cssInlinePos = inlinePos;
      item.cssContentPos = contentPos;
      const nextOutlinePoint = isEndDirection ? contentPos + contentSize + contentGap : contentPos;

      range(columnCount).forEach((indexOffset) => {
        endOutline[columnIndex + indexOffset] = nextOutlinePoint;
      });
    }

    if (stretchOutline && items.length) {
      let scalePoint = 0;

      if (stretchOutline === "scale-up") {
        scalePoint = Math.max(...endOutline);
      } else if (stretchOutline === "scale-center") {
        scalePoint = (Math.max(...endOutline) + Math.min(...endOutline)) / 2;
      } else {
        // scale-down
        scalePoint = Math.min(...endOutline);
      }
      if (isEndDirection) {
        // end 방향이면 endOutline이 gap만큼 더 추가되어 있다.
        scalePoint -= contentGap;

        // 높이 제한
        const startPoint = Math.min(...startOutline);
        const nextHeight = between(
          // 높이
          scalePoint - startPoint,
          stretchContainerSize[0],
          stretchContainerSize[1],
        );

        scalePoint = nextHeight + startPoint;
      } else {
        // 높이 제한
        const startPoint = Math.max(...startOutline);
        const nextHeight = between(
          // 반대 방향의 경우 startPoint(start)가 scalePoint(end)보다 큰 숫자다.
          startPoint - scalePoint,
          stretchContainerSize[0],
          stretchContainerSize[1],
        );

        scalePoint = nextHeight - startPoint;
      }

      endOutline.forEach((point, i) => {
        const totalGap = (itemIndexes[i].length - 1) * contentGap;
        const startPoint = startOutline[i];
        const prevSize = Math.abs(point - startPoint) - (isEndDirection ? contentGap : 0) - totalGap;
        const nextSize = (Math.abs(scalePoint - startPoint) - totalGap);
        const scale = nextSize / prevSize;

        if (!prevSize || scale === 1 || !isFinite(scale)) {
          return;
        }
        if (isEndDirection) {
          endOutline[i] = scalePoint + contentGap;
        } else {
          endOutline[i] = scalePoint;
        }

        const length = itemIndexes[i].length;
        let prevPoint = isEndDirection ? startOutline[i] : startOutline[i] - contentGap;

        const itemInfos = itemIndexes[i].map((itemIndex, j) => {
          const item = items[itemIndex];
          const originalSize = useComputedSize
            ? item.computedContentSize
            : item.contentSize;
          let minStretchSize = 0;
          let maxStretchSize = Infinity;

          if (isString(stretchItemSize[0])) {
            const [inline, content] = stretchItemSize[0].split(":").map((value) => parseFloat(value));

            minStretchSize = item.computedInlineSize * content / inline;
          } else {
            minStretchSize = stretchItemSize[0];
          }
          if (isString(stretchItemSize[1])) {
            const [inline, content] = stretchItemSize[1].split(":").map((value) => parseFloat(value));

            maxStretchSize = item.computedInlineSize * content / inline;
          } else {
            maxStretchSize = stretchItemSize[1];
          }


          return {
            item,
            index: j,
            itemIndex,
            minSize: minStretchSize,
            originalSize,
            nextSize: originalSize,
            maxSize: maxStretchSize,
          };
        });

        if (scale > 1) {
          itemInfos.sort((a, b) => {
            return a.originalSize - b.originalSize;
          });
        } else {
          itemInfos.sort((a, b) => {
            return b.originalSize - a.originalSize;
          });
        }
        // minSize, maxSize 제한하여 scale을 적용한다.
        let sumPrevSize = 0;
        let sumNextSize = 0;
        itemInfos.forEach((itemInfo) => {
          // 이전까지의 합 scale은 점점 목표치(`scale`)에 다가가야 한다.
          // 그렇지 않는 경우는 max, min에 도달한 경우라고 판단.

          const nextScale = sumNextSize > nextSize ? scale : (nextSize - sumNextSize) / (prevSize - sumPrevSize);
          const prevItemSize = itemInfo.originalSize;
          const nextItemSize = throttle(between(prevItemSize * nextScale, itemInfo.minSize, itemInfo.maxSize), 0.01);

          sumPrevSize += prevItemSize;
          sumNextSize += nextItemSize;
          itemInfo.nextSize = nextItemSize;
        });
        // minSize, maxSize 적용 이후 gap이 남는 경우 전부 강제 scale 한다.
        if (throttle(sumNextSize - nextSize, 0.01)) {
          const lastScale = throttle(nextSize / sumNextSize, 0.01);

          itemInfos.forEach((itemInfo) => {
            itemInfo.nextSize *= lastScale;
          });
        }
        // 다시 index 순서로 정렬해야 포지션을 설정 가능함
        itemInfos.sort((a, b) => {
          return a.index - b.index;
        });
        itemInfos.forEach((itemInfo, j) => {
          const item = itemInfo.item;
          const nextItemSize = itemInfo.nextSize;
          item.addCSSGridRect({
            contentPos: isEndDirection ? prevPoint : prevPoint - nextItemSize,
            contentSize: nextItemSize,
          });

          if (isEndDirection) {
            prevPoint = item.cssContentPos! + item.cssContentSize! + contentGap;
          } else {
            prevPoint = item.cssContentPos! - contentGap;
          }

          if (j === length - 1) {
            let posOffset = 0;
            let sizeOffset = 0;

            if (isEndDirection) {
              sizeOffset = (item.cssContentPos! % 1 >= 0.5 ? 1 : 0)
                + (item.cssContentSize! % 1 >= 0.5 ? 1 : 0)
                + (scalePoint % 1 >= 0.5 ? -1 : 0);
            } else {
              posOffset = (item.cssContentPos! % 1 < 0.5 ? -1 : 0)
                + (scalePoint % 1 < 0.5 ? 1 : 0);
            }
            // Offset position and size need to be adjusted because they are rounded.


            item.addCSSGridRect({
              contentPos: item.cssContentPos! - posOffset,
              contentSize: item.cssContentSize! - sizeOffset,
            });
          }
        });
      });
    }
    // Finally, check whether startPos and min of the outline match.
    // If different, endOutline is updated.
    if (isStartContentAlign && startPos !== Math.min(...endOutline)) {
      startPos = Math.max(...endOutline);
      endOutline = endOutline.map(() => startPos);
    }

    // if end items, startOutline is low, endOutline is high
    // if start items, startOutline is high, endOutline is low
    return {
      start: isEndDirection ? startOutline : endOutline,
      end: isEndDirection ? endOutline : startOutline,
    };
  }
  public getComputedOutlineSize(items = this.items) {
    const { align } = this.options;
    const inlineGap = this.getInlineGap();
    const containerInlineSize = this.getContainerInlineSize();
    const columnSizeOption = this.columnSize || this.outlineSize;
    const columnOption = this.column || this.outlineLength;
    let column = columnOption || 1;

    let columnSize = 0;

    if (align === "stretch") {
      if (!columnOption) {
        const maxStretchColumnSize = this.maxStretchColumnSize || Infinity;

        column = Math.max(1, Math.ceil((containerInlineSize + inlineGap) / (maxStretchColumnSize + inlineGap)));
      }
      columnSize = (containerInlineSize + inlineGap) / (column || 1) - inlineGap;
    } else if (columnSizeOption) {
      columnSize = columnSizeOption;
    } else if (items.length) {
      let checkedItem = items[0];

      for (const item of items) {
        const attributes = item.attributes;
        const columnAttribute = parseInt(attributes.column || "1", 10);
        const maxColumnAttribute = parseInt(attributes.maxColumn || "1", 10);

        if (
          item.updateState !== UPDATE_STATE.UPDATED
          || !item.inlineSize
          || columnAttribute !== 1
          || maxColumnAttribute !== 1
        ) {
          continue;
        }
        checkedItem = item;
        break;
      }
      const inlineSize = checkedItem.inlineSize || 0;

      columnSize = inlineSize;
    } else {
      columnSize = containerInlineSize;
    }
    return columnSize || 0;
  }
  public getComputedOutlineLength(items = this.items) {
    const inlineGap = this.getInlineGap();
    const columnOption = this.column || this.outlineLength;
    const columnCalculationThreshold = this.columnCalculationThreshold;
    let column = 1;

    if (columnOption) {
      column = columnOption;
    } else {
      const columnSize = this.getComputedOutlineSize(items);

      column = Math.max(
        1,
        Math.floor(
          (this.getContainerInlineSize() + inlineGap) /
          (columnSize - columnCalculationThreshold + inlineGap)
        )
      );
      if (!this.maxStretchColumnSize) {
        column = Math.min(
          items.length,
          column,
        );
      }
    }
    return column;
  }
  private _getAlignPoses(column: number, columnSize: number) {
    const { align } = this.options;
    const inlineGap = this.getInlineGap();
    const containerSize = this.getContainerInlineSize();
    const indexes = range(column);

    let offset = 0;
    let dist = 0;

    if (align === "justify" || align === "stretch") {
      const countDist = column - 1;

      dist = countDist ? Math.max((containerSize - columnSize) / countDist, columnSize + inlineGap) : 0;
      offset = Math.min(0, containerSize / 2 - (countDist * dist + columnSize) / 2);
    } else {
      dist = columnSize + inlineGap;
      const totalColumnSize = (column - 1) * dist + columnSize;

      if (align === "center") {
        offset = (containerSize - totalColumnSize) / 2;
      } else if (align === "end") {
        offset = containerSize - totalColumnSize;
      }
    }
    return indexes.map((i) => {
      return offset + i * dist;
    });
  }
}

export interface MasonryGrid extends Properties<typeof MasonryGrid> {
}


/**
 * Align of the position of the items. If you want to use `stretch`, be sure to set `column` or `columnSize` option. ("start", "center", "end", "justify", "stretch")
 * @ko 아이템들의 위치의 정렬. `stretch`를 사용하고 싶다면 `column` 또는 `columnSize` 옵션을 설정해라.  ("start", "center", "end", "justify", "stretch")
 * @name Grid.MasonryGrid#align
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["align"]}
 * @default "justify"
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   align: "start",
 * });
 *
 * grid.align = "justify";
 * ```
 */


/**
 * The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container.  Can be used instead of outlineLength.
 * @ko 열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.
 * @name Grid.MasonryGrid#column
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["column"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   column: 0,
 * });
 *
 * grid.column = 4;
 * ```
 */


/**
 * The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
 * @ko 열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.
 * @name Grid.MasonryGrid#columnSize
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["columnSize"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   columnSize: 0,
 * });
 *
 * grid.columnSize = 200;
 * ```
 */


/**
 * The size ratio(inlineSize / contentSize) of the columns. 0 is not set.
 * @ko 열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다.
 * @name Grid.MasonryGrid#columnSizeRatio
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["columnSizeRatio"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   columnSizeRatio: 0,
 * });
 *
 * grid.columnSizeRatio = 0.5;
 * ```
 */


/**
 * If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
 * @ko stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.
 * @name Grid.MasonryGrid#maxStretchColumnSize
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["maxStretchColumnSize"]}
 * @default Infinity
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   align: "stretch",
 *   maxStretchColumnSize: 0,
 * });
 *
 * grid.maxStretchColumnSize = 400;
 * ```
 */