:global(.cell) { background-color: silver; } import {render} from 'react-dom'; import React from 'react'; import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid'; class GridDemo extends React.Component { render() { return (
Cell 1
Cell 2
Cell 3
); } } render(, document.getElementById('grid'));
:global(.cell) { background-color: silver; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } import {render} from 'react-dom'; import React from 'react'; import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid'; class GridDemo extends React.Component { render() { return (

Offset a column.

xsOffset={11} xs={1}
xsOffset={10} xs={2}
xsOffset={9} xs={3}
xsOffset={8} xs={4}
xsOffset={7} xs={5}
xsOffset={6} xs={6}
xsOffset={5} xs={7}
xsOffset={4} xs={8}
xsOffset={3} xs={9}
xsOffset={2} xs={10}
xsOffset={1} xs={11}
); } } render(, document.getElementById('grid'));
:global(.cell) { background-color: silver; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } import {render} from 'react-dom'; import React from 'react'; import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid'; class GridDemo extends React.Component { render() { return (

Auto Width: add any number of auto sizing columns to a row. Let the grid figure it out.

Autosize
Autosize column with larger text
Autosize
Autosize column with much much much larger text
Autosize
); } } render(, document.getElementById('grid'));
:global(.cell) { background-color: silver; } :global(.cell_tall) { height: 64px; } import {render} from 'react-dom'; import React from 'react'; import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid'; class GridDemo extends React.Component { render() { return (

Add classes to align elements to the start or end of row as well as the top, bottom, or center of a column

start center end
top
middle
bottom
); } } render(, document.getElementById('grid'));
:global(.cell) { background-color: silver; } import {render} from 'react-dom'; import React from 'react'; import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid'; class GridDemo extends React.Component { render() { return (

Distribution: add classes to distribute the contents of a row or column.

around
around
around
between
between
between
); } } render(, document.getElementById('grid'));