@grafana/ui/dist/esm/components/Layout/Grid/Grid.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { forwardRef } from 'react';
import { useStyles2 } from '../../../themes/ThemeContext.mjs';
import { getResponsiveStyle } from '../utils/responsiveness.mjs';

"use strict";
const Grid = forwardRef((props, ref) => {
  const { alignItems, children, gap, rowGap, columnGap, columns, minColumnWidth, ...rest } = props;
  const styles = useStyles2(getGridStyles, gap, rowGap, columnGap, columns, minColumnWidth, alignItems);
  return /* @__PURE__ */ jsx("div", { ref, ...rest, className: styles.grid, children });
});
Grid.displayName = "Grid";
const getGridStyles = (theme, gap, rowGap, columnGap, columns, minColumnWidth, alignItems) => {
  return {
    grid: css([
      { display: "grid" },
      getResponsiveStyle(theme, gap, (val) => ({
        gap: theme.spacing(val)
      })),
      getResponsiveStyle(theme, rowGap, (val) => ({
        rowGap: theme.spacing(val)
      })),
      getResponsiveStyle(theme, columnGap, (val) => ({
        columnGap: theme.spacing(val)
      })),
      minColumnWidth && getResponsiveStyle(theme, minColumnWidth, (val) => ({
        gridTemplateColumns: `repeat(auto-fill, minmax(${theme.spacing(val)}, 1fr))`
      })),
      columns && getResponsiveStyle(theme, columns, (val) => ({
        gridTemplateColumns: `repeat(${val}, 1fr)`
      })),
      getResponsiveStyle(theme, alignItems, (val) => ({
        alignItems: val
      }))
    ])
  };
};

export { Grid };
//# sourceMappingURL=Grid.mjs.map