# elementor/3.8.0-beta1/app/assets/js/ui/atoms/css-grid.js

Elementor Website Builder – more than just a page builder, version 3.8.0-beta1. 33 lines.

- Page: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/ui/atoms/css-grid.js
- Raw: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/raw/app/assets/js/ui/atoms/css-grid.js
- Modified: 2022-09-19T16:26:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/ui/atoms/css-grid.js#L10-L20`.

```javascript
import { pxToRem } from '../../utils/utils';

import './css-grid.scss';

export default function CssGrid( props ) {
	const gridStyle = {
		'--eps-grid-columns': props.columns,
		'--eps-grid-spacing': pxToRem( props.spacing ),
		'--eps-grid-col-min-width': pxToRem( props.colMinWidth ),
		'--eps-grid-col-max-width': pxToRem( props.colMaxWidth ),
	};

	return (
		<div style={ gridStyle } className={ `eps-css-grid ${ props.className }` }>
			{ props.children }
		</div>
	);
}

CssGrid.propTypes = {
	className: PropTypes.string,
	children: PropTypes.any.isRequired,
	columns: PropTypes.number,
	spacing: PropTypes.number,
	colMinWidth: PropTypes.number,
	colMaxWidth: PropTypes.number,
};

CssGrid.defaultProps = {
	spacing: 24,
	className: '',
};

```