---
name: Grid
route: /grid
---

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

# Grid

## Props

Styled Prop-table 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">
                            breakpoints
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Array
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= [0, 432, 800, 1025, 1200, 1400]</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Breakpoints in Pixels, in ascending order starting with
                    zero.
                </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">
                            colspan
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnType-eeRrFP bDWwnH">
                        <span className="PropsTable__PropType-eHQrbF fTJiWl">
                            Number
                        </span>
                    </div>
                    <div className="PropsTable__Column-bEUPQe PropsTable__ColumnValue-gNLuoz kFUMBi">
                        <span className="PropsTable__PropDefaultValue-enfNMc cfvmpw">
                            <em>= 1</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Number of 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">
                            left
                        </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>= "0"</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Left padding of the Grid.
                </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">
                            undefined │ String
                        </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-bEdmzD btddXs">
                    Right padding of the Grid.
                </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">
                            undefined │ String
                        </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-bEdmzD btddXs">
                    Top padding of the Grid.
                </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">
                            undefined │ String
                        </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-bEdmzD btddXs">
                    Bottom padding of the Grid.
                </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">
                            gutterX
                        </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>= "0"</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Horizontal gutter.
                </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">
                            gutterY
                        </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>= "0"</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Verical gutter.
                </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-bEdmzD btddXs">
                    Horizontal align of child elements. Works only when:
                    cssMode='flex'
                </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-bEdmzD btddXs">
                    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">
                            control
                        </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>= false</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Enable visual control via ESC-Key.
                </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">
                            controlColor
                        </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>= "rgba(0, 0, 0, 0.2)"</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Custom color for the grid-control.
                </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">
                            position
                        </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>= "relative"</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    CSS-position.
                </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">
                            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-bEdmzD btddXs">
                    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-bEdmzD btddXs">
                    cssMode `flex` only! Styles Grid-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-bEdmzD btddXs">
                    cssMode `flex` only! Styles Grid-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">
                            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 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">
                            cssMode
                        </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>= undefined</em>
                        </span>
                    </div>
                </div>
                <p className="PropsTable__Paragraph-bEdmzD btddXs">
                    Use CSS Grid Layout or Flexbox. Override automatic detection
                    of Grid-Layout-support.
                </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">
                            tag
                        </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>= "div"</em>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
