@wulperstudio/cms/organisms/MasonryGrid/index.js

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "sx"];
import React from 'react';
import { Box } from '@mui/material';
import { jsx as _jsx } from "react/jsx-runtime";
export var MasonryGrid = function MasonryGrid(_ref) {
  var children = _ref.children,
    sx = _ref.sx,
    props = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/_jsx(Box, Object.assign({
    sx: Object.assign({
      '--gap': 'clamp(1rem, 3vmin, 1rem)',
      columns: '270px',
      gap: 'var(--gap)',
      width: '96%',
      maxWidth: '960px',
      margin: '5rem auto',
      '& > *': {
        breakInside: 'avoid',
        marginBottom: 'var(--gap)'
      }
    }, sx)
  }, props, {
    children: children
  }));
};