@dotconnor/grommet

## Stack A container that stacks contents on top of each other. One child is designated as the `guidingChild` which determines the size. All other children are placed within that size, either above or below based on their order. Stack is typically used to decorate Meter, Chart, or icons. [![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Layout-Stack&full=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/stack&module=%2Fsrc%2FStack.js) ## Usage ```javascript import { Stack } from 'grommet'; <Stack /> ``` ## Properties **a11yTitle** Custom label to be used by screen readers. When provided, an aria-label will be added to the element. ``` string ``` **alignSelf** How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid. ``` start center end stretch ``` **gridArea** The name of the area to place this inside a parent Grid. ``` string ``` **margin** The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side. ``` none xxsmall xsmall small medium large xlarge { bottom: xxsmall xsmall small medium large xlarge string, end: xxsmall xsmall small medium large xlarge string, horizontal: xxsmall xsmall small medium large xlarge string, left: xxsmall xsmall small medium large xlarge string, right: xxsmall xsmall small medium large xlarge string, start: xxsmall xsmall small medium large xlarge string, top: xxsmall xsmall small medium large xlarge string, vertical: xxsmall xsmall small medium large xlarge string } string ``` **anchor** Where to anchor children from. If not specified, children fill the guiding child's area. ``` center left right top bottom top-left bottom-left top-right bottom-right ``` **fill** Whether to expand to fill all of the available width and height in the parent container. ``` horizontal vertical boolean ``` **guidingChild** Which child to guide layout from. All other children will be positioned within that area. Defaults to 'first'. Defaults to `first`. ``` number first last ``` **interactiveChild** Which child to restrict user interaction to. All other children will have user interaction disabled. ``` number first last ``` ## Intrinsic element ``` div ``` ## Theme **stack.extend** Any additional style for the control of the Stack component. Expects `string | (props) => {}`. Defaults to ``` undefined ```