forked from ddrilling/asb_cloud_front
32 lines
760 B
JavaScript
32 lines
760 B
JavaScript
export const Grid = ({children, ...other}) => {
|
|
const gridContainerStyle = {
|
|
display: 'grid',
|
|
margin: '8px',
|
|
justifyItems: 'stretch',
|
|
alignItems: 'stretch',
|
|
...other,
|
|
}
|
|
|
|
return <div style={gridContainerStyle}>
|
|
{children}
|
|
</div>
|
|
}
|
|
|
|
export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
|
|
const localRow = +row
|
|
const localCol = +col
|
|
const localColSpan = colSpan ? colSpan - 1 : 0
|
|
const localRowSpan = rowSpan ? rowSpan - 1 : 0
|
|
const gridItemStyle = {
|
|
gridColumnStart: localCol,
|
|
gridColumnEnd: localCol + localColSpan,
|
|
gridRowStart: localRow,
|
|
gridRowEnd: localRow + localRowSpan,
|
|
padding: '4px',
|
|
...other,
|
|
}
|
|
|
|
return <div style={gridItemStyle}>
|
|
{children}
|
|
</div>
|
|
} |