---
name: Box
route: /box
---

import { Props } from "docz";
import { Box } from "../raster/Box";

# Box

## Props

Styled Proptable is coming soon!

<div className="Props__Container-jirKCc dPXHkt">
    <div>
        <div className="PropsTable__Container-iivJWw gUnLTo">
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            cols
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Array&lt;Number&gt; │ Number
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= undefined</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    Width of the Box. Falls back to width of parent Box or Grid.
                    Unit: Grid columns defined with the prop "colspan"
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            left
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Array&lt;Number&gt; │ Number
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= 0</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    Left margin of the Box. Unit: Grid-columns.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            right
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Array&lt;Number&gt; │ Number
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= 0</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    Right margin of the Box. Unit: Grid-columns.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            top
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Array&lt;Number&gt; │ Number
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= 0</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    Top margin of the Box. Unit: Grid-columns.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            bottom
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Array&lt;Number&gt; │ Number
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= 0</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    Bottom margin of the Box. Unit: Grid-columns.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            alignX
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            undefined │ String
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= [Empty String]</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    cssMode `flex` only! Horizontal Align of child elements.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            alignY
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            undefined │ String
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= [Empty String]</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    Vertical Align of child elements.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            style
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            undefined │ String
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= [Empty String]</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    cssMode `grid` only! Custom styles with styled-components.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            styleInner
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            undefined │ String
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= [Empty String]</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    cssMode `flex` only! Styles Box-Inner-Container with
                    styled-components.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            styleOuter
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            undefined │ String
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= [Empty String]</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    cssMode `flex` only! Styles Box-Outer-Container with
                    styled-components.
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            hasChildBoxes
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Bool
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= undefined</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-hVmQwH gLzbbx">
                    Tell react-raster that you have child-Boxes inside this
                    Grid- or Box-Component. See the topic "Resetting Boxes"
                </p>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            className
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            String
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= [Empty String]</em>
                        </span>
                    </div>
                </div>
            </div>
            <div className="PropsTable__Line-cyWEmY cNnoOO">
                <div className="PropsTable__Content-gQeRjc dseXvL">
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnName-fFiAb hcttXK">
                        <span className="PropsTable__PropName-hnGiVY dBACRe">
                            children
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Node
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= null</em>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
