Responsive Grid Layout

The responsive grids positions UI elements in a multi column flow layout. They can be configured to display a variable number of columns depending on available form/screen size. With these controls, it is possible to achieve flexible layouts and line breaks for large, medium, and small-sized screens.

Responsive Grid Layout Default

Use a Responsive grid Layout to arrange components evenly in a grid layout in default. For better experince inspect the example to see the responsive behaviour in different screen size.

<div class="fd-responsive-grid-layout">
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
     <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
     <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
     <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
     <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
     <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
</div>

Responsive Grid Layout small break point

Use a Responsive grid Layout to arrange components evenly in a grid layout in small breakpoint.

<div class="fd-responsive-grid-layout fd-responsive-grid-layout--small">
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
</div>

Responsive Grid Layout on Medium break point

Use a Responsive grid Layout to arrange components evenly in a grid layout in small breakpoint..

<div class="fd-responsive-grid-layout fd-responsive-grid-layout--medium">
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
</div>

Responsive Grid Layout on large break point

Use a Responsive grid Layout to arrange components evenly in a grid layout in large breakpoint..

<div class="fd-responsive-grid-layout fd-responsive-grid-layout--large">
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
</div>

Responsive Grid Layout on extra large break point

Use a Responsive grid Layout to arrange components evenly in a grid layout in extra large breakpoint..

<div class="fd-responsive-grid-layout fd-responsive-grid-layout--extraLarge">
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
    <div class="fd-panel">
        <div class="fd-panel__body">
            <p></p>
        </div>
    </div>
</div>